使用HTML5和CSS3制作遮罩文字特效

最新推荐文章于 2022-06-12 23:18:00 发布

web前端开发V

最新推荐文章于 2022-06-12 23:18:00 发布

阅读量738

点赞数

640?wx_fmt=jpeg

遮罩文字特效指的是文字下面的图片被文字层遮挡住，图片只在文字中显示。这种效果使用photoshop来制作是非常简单的。

现在，Webkit内核的浏览器支持CSS3的background-clip属性，它能够完成和photoshop相同的文字遮罩效果。

另外，还可以使用CSS3 mask-image 属性来完成同样的效果。

Background-Clip属性创建遮罩文字特效效果如下：

640?wx_fmt=png

TML代码如下：

<!DOCTYPE html>	
<html lang="zh">	
<head>	
  <meta charset="UTF-8">	
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 	
  <meta name="viewport" content="width=device-width, initial-scale=1.0">	
  <title>使用HTML5和CSS3制作遮罩文字特效|DEMO1_web前端开发_专注web前端领域的学习与优质资源的分享</title>	
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>	
  <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>	
  <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>	
  <link rel="stylesheet" type="text/css" href="css/web-demo.css">	
  <link rel="stylesheet" type="text/css" href="css/style.css">	
</head>	
<body>	
  <div class="web-container">	
    <header class="web-header">	
      <h1>使用HTML5和CSS3制作遮罩文字特效 <span>web前端开发-www.webqdkf.com</span></h1>	
      <div class="web-links">	
        <a class="web-icon icon-web-home-outline" href="http://www.webqdkf.com/" title="web前端开发" target="_blank"><span> web前端开发</span></a>	
        <a class="web-icon icon-web-arrow-forward-outline" href="http://www.webqdkf.com/qdkf/h5/2019-10-17/484.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>	
      </div>	
      <div class="web-demo center">	
        <a href="index.html" class="current">Background-Clip</a>	
        <a href="index2.html">Mask-Image</a>	
      </div>	
    </header>	
    <div class="container-clip">	
      <div id="clipped-title1">	
        <h1>前端开发</h1>	
      </div>	
      <div id="clipped-title2">	
      <h1>www.webqdkf.com</h1>	
      </div>	
    </div>	
  </div>	

	
</body>	
</html>

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

Mask-Image属性创建遮罩文字特效截图效果如下：

640?wx_fmt=png

HTML代码如下：

<!DOCTYPE html>	
<html lang="zh">	
<head>	
  <meta charset="UTF-8">	
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 	
  <meta name="viewport" content="width=device-width, initial-scale=1.0">	
  <title>使用HTML5和CSS3制作遮罩文字特效|DEMO2_jQuery之家-自由分享jQuery、html5、css3的插件库</title>	
  <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic' rel='stylesheet' type='text/css'>	
  <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>	
  <link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>	
  <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>	
  <link rel="stylesheet" type="text/css" href="css/web-demo.css">	
  <link rel="stylesheet" type="text/css" href="css/style.css">	
</head>	
<body>	
  <div class="web-container">	
    <header class="web-header">	
      <h1>使用HTML5和CSS3制作遮罩文字特效 <span>web前端开发-www.webqdkf.com</span></h1>	
      <div class="web-links">	
        <a class="web-icon icon-web-home-outline" href="http://www.webqdkf.com/" title="web前端开发" target="_blank"><span> web前端开发</span></a>	
        <a class="web-icon icon-web-arrow-forward-outline" href="http://www.webqdkf.com/qdkf/h5/2019-10-17/484.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>	
      </div>	
      <div class="web-demo center">	
        <a href="index.html">Background-Clip</a>	
        <a href="index2.html" class="current">Mask-Image</a>	
      </div>	
    </header>	

	
    <div class="container-mask">	
      <div id="masked-image">	
      <h1>web前端开发<br/>web前端开发</h1>	
      </div>	
    </div>	
  </div>	
</body>	
</html>

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

完整的源码下载地址：

https://tc5.us/file/21793581-403021450

640?wx_fmt=jpeg