css3 渐变文字

笨蛋-木呆呆

于 2018-12-10 14:28:32 发布

阅读量794

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 渐变文字

本文链接：https://blog.csdn.net/qq_33401832/article/details/84939471

css 专栏收录该内容

1 篇文章

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<style type="text/css">
    h1{
        position: relative;
        color: rgba(255, 255, 255, 1);
        background-image: url('http://e.hiphotos.baidu.com/image/h%3D300/sign=8000a165df1b0ef473e89e5eedc551a1/b151f8198618367afe76969623738bd4b21ce5fa.jpg'); /*不会渐变 */
    }
    h1:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, rgba(78, 255, 255, 1), transparent );
        /*background-image: url('http://e.hiphotos.baidu.com/image/h%3D300/sign=8000a165df1b0ef473e89e5eedc551a1/b151f8198618367afe76969623738bd4b21ce5fa.jpg');会渐变*/
    }
</style>
</style>
</head>

<body>
    <h1 text="怎么滴个渐变发">怎么滴个渐变发</h1>
</body>

</html>