HTML5和CSS3制作遮罩文字特效

PetitQ 图片/图形, 文本/链接 2018-11-09 3.10K 0 2

遮罩文字特效指的是文字下面的图片被文字层遮挡住，图片只在文字中显示。这种效果使用 photoshop 来制作是非常简单的。现在，Webkit 内核的浏览器支持 CSS3 的 background-clip 属性，它能够完成和 photoshop 相同的文字遮罩效果。另外，还可以使用 CSS3 mask-image 属性来完成同样的效果。

Webkit Background-Clip 方法

制作这个特效的基本 HTML 结构如下

也想出现在这里？联系我们吧

```
<div id="clipped-title1">
```
```
   <h1>THE LION</h1>
```
```
</div>
```
```
 
```
```
<div id="clipped-title2">
```
```
   <h1>King of the Jungle</h1>
```
```
</div>
```

在 CSS 代码中，将使用 background-clip 属性来剪裁文本。对两个 div 元素分别使用不同的背景图片，并通过 webkit-text-fill-color 属性设置为 transparent，确保文字的填充色为透明色。

```
#clipped-title1 {
```

  background: url(../images/lion.jpg) no-repeat center center;

```
  background-size: cover;
```
```
  color: #fff;
```
```
  -webkit-text-fill-color: transparent;
```
```
  -webkit-background-clip: text;
```
```
}
```
```
 
```
```
#clipped-title2 {
```

  background: url(../images/jungle.jpg)no-repeat top center;

```
  background-size: cover;
```
```
  color: #fff;
```
```
  -webkit-text-fill-color: transparent;
```
```
  -webkit-background-clip: text;
```
```
  cursor: pointer;
```
```
}
```
```
 
```
```
#clipped-title1 h1 {
```
```
  font-size: 200px;
```
```
  font-family: Anton, sans-serif;
```
```
  text-align: center;
```

  -webkit-transition: text-shadow 1s ease;

```
  text-shadow: 0 0 1px rgba(0,0,0,.1);
```
```
  margin: 0;
```
```
  padding: 0;
```
```
}
```
```
 
```
```
#clipped-title2 h1 {
```
```
  font-size: 110px;
```
```
  font-family: Pacifico, sans-serif;
```
```
  text-align: center;
```

  -webkit-transition: text-shadow 1s ease;

```
  text-shadow: 0 0 1px rgba(0,0,0,.1);
```
```
  margin-top: -75px;
```
```
  padding: 0;
```
```
}
```

Webkit Mask-Image 方法

通过-webkit-mask-image 属性，你可以在文字上设置图片，制作这个特效的 HTML 结构如下：

```
<div id="masked-image">
```

     <h1>CERTIFIED ROUGH<br/>TEXTURED TEXT</h1>

```
</div>
```

在 CSS 中，简单的设置一些基本的 CSS 样式，然后通过-webkit-mask-image 属性来为文字设置图片纹理。

```
#masked-image {
```
```
    font-family: Oswald, sans-serif;
```
```
    font-size: 100px;
```
```
    color: #fff;
```
```
    text-transform: uppercase;
```
```
    border: 14px solid #fff;
```
```
    border-radius: .2em;
```
```
    text-align: center;
```
```
    margin: 0;
```
```
    display: block;
```

    -webkit-mask-image: url(../images/rough-texture.png);

```
    -webkit-transform: rotate(-4deg);
```

    -moz-mask-image: url(../images/rough-texture.png);

```
    -moz-transform: rotate(-4deg);
```

    -o-mask-image: url(../images/rough-texture.png);

```
    -o-transform: rotate(-4deg);
```

    mask-image: url(../images/rough-texture.png);

```
    transform: rotate(-4deg);
```
```
}
```

HTML5 和 CSS3 制作遮罩文字特效

已有 775 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

HTML5和CSS3制作遮罩文字特效

Webkit Background-Clip 方法

Webkit Mask-Image 方法

HTML5 和 CSS3 制作遮罩文字特效

相关文章

jQuery+CSS3鼠标悬停超链接文字动画特效

CSS3炫酷文字动画特效

CSS3文字震动破碎特效

发表回复取消回复

热销模板

图片/图形

Webkit Background-Clip 方法

Webkit Mask-Image 方法

HTML5 和 CSS3 制作遮罩文字特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复