【CSS】💕CSS如何快速实现文字遮罩图片效果

Posted on 2021-07-13 10:42  秃头少女JennieLiu  阅读(662)  评论(2)  编辑  收藏  举报

效果图

📑知识点：运用到的小属性：background-clip : text

background-clip : text

当然现在只有 chrome 支持，所以通常想使用它，需要

-webkit-background-clip:text

使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

😳完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      div {
        font-size: 180px;
        font-weight: bold;
        /* 这里的图片3.jpg记得改成自己的本地图片哦~ */
        background: url(3.jpg) no-repeat center center;
        background-size: cover;
        -webkit-background-clip: text;
        /*这里是把文字设置成透明的意思*/
        color: transparent;
      }
    </style>
  </head>
  <body>
    <div>Duan-XX</div>
  </body>
</html>