遮罩文字特效指的是文字下面的图片被文字层遮挡住,图片只在文字中显示。这种效果使用 photoshop 来制作是非常简单的。现在,Webkit 内核的浏览器支持 CSS3 的 background-clip 属性,它能够完成和 photoshop 相同的文字遮罩效果。另外,还可以使用 CSS3 mask-image 属性来完成同样的效果。
制作这个特效的基本 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 属性,你可以在文字上设置图片,制作这个特效的 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);
}
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!