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

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

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

THE LION

King of the Jungle

在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;

html文字遮罩的用途,使用HTML5和CSS3制作遮罩文字特效相关推荐

html5 纵向分割线,html5和css3制作不规则的网页背景分割线
这是一款实用的.效果炫酷的html5和css3制作不规则的网页背景分割线网页模板. EXAMPLE 1 下面来看一下第一个demo的制作流程. html结构:实用一个section来包裹所有的内容,其 ...
html怎么制作3D字体,用CSS3制作3D文字效果代码实例教程
这个简单的CSS文本阴影教程将一步步教你如何通过堆叠多层阴影来创建3D文字,然后进一步利用CSS3的transform和transition属性来实现鼠标移过字体放大的效果. 阿里西西web开发网为大 ...
html5 svg 遮罩,HTML5 SVG和CSS3制作动态文字遮罩背景特效
在上一个教程中,我们使用SVG和CSS制作了文字遮罩效果.在这个教程中,我们将要使用SVG和CSS3来向你展示两种动态遮罩文字背景的效果.第一中效果是在鼠标滑过遮罩文字的时候,文字背景会有彩虹背景动画 ...
css3网站代码 html5_【实战HTML5与CSS3】用HTML5和CSS3制作页面（上）
前言周一离职并且入职了,于是开始了做新项目,那天我问了下前端大哥,我们做的项目需要兼容哪些浏览器,他说需要兼容IE9以上与chrome,ff,我一下就诡异的笑了.... 这不是HTML5与CSS3项 ...
用html和css制作钟表,使用HTML5和CSS3制作简单的钟表
利用html5,css实现钟摆效果 ,在项目中经常会遇到,今天小编把基于HTML5+CSS3实现简单的时钟效果的实现代码分享到脚本之家平台,需要的额朋友参考下吧目的: 利用html5,css实现钟摆 ...
如何用html5和css3制作立体相册呢？
先来看一下效果:(可以像动画一样来回播放)效果地址代码如下: <!DOCTYPE html> <html lang="en"> <head>& ...
Html5 + Css3 制作QQ悬浮特效
1 QQ二维码图标右侧悬浮,可开可收 2 点击QQ在线咨询,可以弹出对方qq对话框 3 代码如下 <!doctype html> <html lang="en"& ...
如何使用HTML5以及CSS3制作美食专题栏目
编写思路: 1.先准备好图片,使用图像标签<img>插入图片: 2.使用两个段落标签<p>完善H5结构,插入正文: 3.使用<em>标签对特殊文本"导语& ...
使用HTML5和CSS制作抖音动态首页
使用HTML5和css3制作一个抖音动态首页可以在谷歌.IE浏览器中显示动态视频播放,在火狐浏览器视频播放不显示抖音首页地址:https://www.douyin.com/ 3.代码如下: < ...

html文字遮罩的用途,使用HTML5和CSS3制作遮罩文字特效

THE LION

King of the Jungle

html文字遮罩的用途,使用HTML5和CSS3制作遮罩文字特效相关推荐

最新文章

热门文章