图片/图形

HTML5和CSS3制作遮罩文字特效

阿里云

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

Webkit Background-Clip 方法

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

也想出现在这里?联系我们
创客主机
  1. <div id="clipped-title1">
  2.    <h1>THE LION</h1>
  3. </div>
  4.  
  5. <div id="clipped-title2">
  6.    <h1>King of the Jungle</h1>
  7. </div>

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

  1. #clipped-title1 {
  2.   background: url(../images/lion.jpg) no-repeat center center;
  3.   background-size: cover;
  4.   color: #fff;
  5.   -webkit-text-fill-color: transparent;
  6.   -webkit-background-clip: text;
  7. }
  8.  
  9. #clipped-title2 {
  10.   background: url(../images/jungle.jpg)no-repeat top center;
  11.   background-size: cover;
  12.   color: #fff;
  13.   -webkit-text-fill-color: transparent;
  14.   -webkit-background-clip: text;
  15.   cursor: pointer;
  16. }
  17.  
  18. #clipped-title1 h1 {
  19.   font-size: 200px;
  20.   font-family: Anton, sans-serif;
  21.   text-align: center;
  22.   -webkit-transition: text-shadow 1s ease;
  23.   text-shadow: 0 0 1px rgba(0,0,0,.1);
  24.   margin: 0;
  25.   padding: 0;
  26. }
  27.  
  28. #clipped-title2 h1 {
  29.   font-size: 110px;
  30.   font-family: Pacifico, sans-serif;
  31.   text-align: center;
  32.   -webkit-transition: text-shadow 1s ease;
  33.   text-shadow: 0 0 1px rgba(0,0,0,.1);
  34.   margin-top: -75px;
  35.   padding: 0;
  36. }

Webkit Mask-Image 方法

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

  1. <div id="masked-image">
  2.      <h1>CERTIFIED ROUGH<br/>TEXTURED TEXT</h1>
  3. </div>

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

  1. #masked-image {
  2.     font-family: Oswald, sans-serif;
  3.     font-size: 100px;
  4.     color: #fff;
  5.     text-transform: uppercase;
  6.     border: 14px solid #fff;
  7.     border-radius: .2em;
  8.     text-align: center;
  9.     margin: 0;
  10.     display: block;
  11.     -webkit-mask-image: url(../images/rough-texture.png);
  12.     -webkit-transform: rotate(-4deg);
  13.     -moz-mask-image: url(../images/rough-texture.png);
  14.     -moz-transform: rotate(-4deg);
  15.     -o-mask-image: url(../images/rough-texture.png);
  16.     -o-transform: rotate(-4deg);
  17.     mask-image: url(../images/rough-texture.png);
  18.     transform: rotate(-4deg);
  19. }

HTML5 和 CSS3 制作遮罩文字特效

已有 824 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(2)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!