2020/10/3-如何设置文字为背景图片的颜色

如果想将文字设置为背景图片的颜色，需要如下步骤：
第一步：设置背景图片 background-image: url("3.jpg");
第二步：设置属性 background-clip: text;
第三步：将文字颜色改为透明 color: transparent;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: transparent;
            background-image: url("3.jpg");
            background-clip: text;
            /* 谷歌浏览器适配 */
            -webkit-background-clip: text;
        }
    </style>
</head>
<body>
    <h1>catfish的个人博客</h1>
</body>
</html>
posted @ 2020-10-03 13:31  小默同学  阅读(430)  评论(0)  编辑  收藏  举报