css实现文字镂空和遮罩效果（background-clip或者 -webkit-text-stroke）

浅浅的花香味﹌ 2022-03-12 06:20 759阅读 0赞

## background-clip定义和用法 ##

background-clip 属性规定背景的绘制区域。

<table> 
 <tbody> 
  <tr> 
   <th>默认值：</th> 
   <td>border-box</td> 
  </tr> 
  <tr> 
   <th>继承性：</th> 
   <td>no</td> 
  </tr> 
  <tr> 
   <th>版本：</th> 
   <td>CSS3</td> 
  </tr> 
  <tr> 
   <th>JavaScript 语法：</th> 
   <td><em>object</em>.style.backgroundClip="content-box"</td> 
  </tr> 
 </tbody> 
</table>

## 语法 ##

background-clip: border-box|padding-box|content-box;

<table> 
 <tbody> 
  <tr> 
   <th>值</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>border-box</td> 
   <td>背景被裁剪到边框盒。</td> 
  </tr> 
  <tr> 
   <td>padding-box</td> 
   <td>背景被裁剪到内边距框。</td> 
  </tr> 
  <tr> 
   <td>content-box</td> 
   <td>背景被裁剪到内容框。</td> 
  </tr> 
 </tbody> 
</table>

### 文字镂空效果 ###

除上面几个属性值之外，还有一个属性值：

-webkit-background-clip: text;

描述：裁减掉文字以外的背景。效果如下：

![20190305143634949.png][]

如果只有裁剪，无法实现上图所示效果。搭配上另外一个css属性使的字体透明显现背景图，即可完成。

-webkit-text-fill-color: transparent;//设置文字填充色为透明
    //color:transparent;

考虑到color的继承性和应用范围，建议使用-webkit-text-fill-color只作用于字体。

代码如下：

css：

.mt-text {
    	-webkit-background-clip: text;
    	-webkit-text-fill-color: transparent;
    	background-image: url(./img/1.jpg);
    	background-repeat: no-repeat;
    	border: 2px dashed;
    }

html：

<div class="mt-text">hello MT</div>

同样，将底图颜色设置成渐变，即实现字体颜色渐变效果。

**[css渐变][css]**

### \-webkit-text-stroke ###

.hollow{
        -webkit-text-stroke: 3px #000;
        color: transparent;
    }

![20190711145011721.png][]

### 遮罩 ###

### **-webkit-mask-image** ###

html

css

.lable{
        -webkit-mask-image: url(./img/txtpattern.png);
        border: 4px solid;
    }

效果

![20190715144331602.png][]

底图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70][]

或                                                                    ![20190715152216305.png][]

[20190305143634949.png]: /images/20220312/871836a3e20d429e80ab7d322814d546.png
[css]: https://www.runoob.com/css3/css3-gradients.html
[20190711145011721.png]: /images/20220312/16ef6ab69603464d8fc799a8ea06064d.png
[20190715144331602.png]: /images/20220312/1f56aa7e38584a98accf6de0c5fd8363.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70]: /images/20220312/a46ce64e8915491eb43ab8b0ed4829c2.png
[20190715152216305.png]: /images/20220312/c39e5e810acb41bc9ae1cbe84a7e93d6.png