美文网首页
用CSS渐变文字

用CSS渐变文字

作者: 抓住时间的尾巴吧 | 来源:发表于2016-10-17 16:27 被阅读76次

    这两天在重构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;
    }

    相关文章

      网友评论

          本文标题:用CSS渐变文字

          本文链接:https://www.haomeiwen.com/subject/uxqzyttx.html