这两天在重构PC端,首页上有一段文字,用的是渐变图片,将底下的标题覆盖住了,用图片麻烦的地方就在于文案改动后,图片得重新做。而且现在的官网分中英文版本,又得多一套图,就想说能不能改用css控制文字渐变。
效果图.jpg<div>文字文字文字</div>
//重要的就是下面这三行,设置背景颜色渐变,将文字变成透明色,从底色中抠出来
.div{
background:-webkit-linear-gradient(left,#f2a2bb,#f2a2bb 25%,#df5b9c 50%,#cfc6c8 75%,#7ac1db 100%);
-webkit-background-clip:text;/只有webkit内核支持text的剪切模式/
color:transparent;
}
网友评论