CSS中有很多有趣的属性可以用来美化网页,其中两行字背景是给文字设置背景颜色的一种方法。
<style>
p {
background-image: linear-gradient(to right, yellow, green);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 48px;
font-weight: bold;
}
</style>
<p>这是一行漂亮的文字。</p> 通过设置background-image属性为渐变色,再将background-clip属性设置为text,则文字部分会被渐变色遮盖,实现了两行字背景的效果。
需要注意的是,为了让文字显示出来,需要将color属性设置为transparent。另外,缩小字体大小可以让显示效果更佳。