[分享]css两行字背景

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。另外，缩小字体大小可以让显示效果更佳。