CSS中有很多有趣的属性可以用来美化网页,其中两行字背景是给文字设置背景颜色的一种方法。<style> p { background-image: linear-gradi
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。另外,缩小字体大小可以让显示效果更佳。
粉丝
0
关注
0
收藏
0