美文网首页
渐变文字

渐变文字

作者: 浮若年华_7a56 | 来源:发表于2018-09-02 20:52 被阅读0次

    在一篇文章里看到的,有两种方法:
    第一种:
    首先将包裹字体的span背景渐变
    background: linear-gradient(to right, red, blue);
    然后通过background-clip(规定背景的绘制区域)这一属性:
    background-clip共有四个值:border-box:背景被裁剪到边框盒
    padding-box:| 背景被裁剪到内边距框
    content-box :背景被裁剪到内容框
    text (现在只有 chrome 支持)以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉。
    我们需要使用background-clip:text;
    最后将字体颜色变透明将背景颜色显现
    color:transparent;
    这是第一个方法。

    第二个方法:将包裹字体的h2起个类名text,使用css使其相对定位,颜色为黄色
    <h2 text="前端简单说">前端简单说</h2>

    h2{
    position: relative;
    color: yellow;
    }

    然后使用before选择器添加一个属性text,绝对定位,层级为10,颜色为绿色,
    使用mask属性(目前,只有webkit内核的浏览器支持mask属性,简单说mask属性,就是能让元素的某一部分显示或隐藏。 )通过渐变将透明的隐藏,以达成渐变效果
    h2:before{
    content: attr(text);
    position: absolute;
    z-index: 10;
    color:green;
    -webkit-mask:linear-gradient(to left, red, transparent );
    }

    相关文章

      网友评论

          本文标题:渐变文字

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