浏览器遮罩html,使用CSS Blend Modes制作跨浏览器的文字遮罩效果

我们可以有许多方法来在网页上制作文字制作效果。但是这些技术都有局限性:Chrome和Safari浏览器支持-webkit-background-clip:text;属性来制作文字遮罩效果,但这个属性只局限于这两个浏览器使用。另外我们也可以使用SVG来制作文字遮罩效果,但是同样也有一些局限性。

现在,通过CSS Blend Modes,我们可以制作出非常漂亮的文字遮罩效果。这项技术的优点是它不仅是跨浏览器的(IE浏览器除外),而且它可以在不支持的浏览器上很优雅的进行回退。

制作文字遮罩效果

使用CSS Blend Modes来制作文字制作效果,它的HTML结果使用一个容器来包裹住文本。

HTMLEAF

要制作这种文字遮罩效果,文字需要进行加粗,字体要大,这样效果才会比较好。

.dark h1 {

margin: 0;

font-size: 20vw;

text-transform: uppercase;

font-family: Montserrat, sans-serif;

line-height: 1.9;

color: #fff;

background: #000;

}

如果浏览器不支持CSS Blend Modes,color属性将会发生作用,将文字填充为设置的颜色。这里收集黑色的背景,所以设置了白色的文字。

包裹文字的容器为它提供一个背景图片,背景图片并不是完全看得见的,只有在文字下面的部分才可以看见。

.dark {

text-align: center;

background-size: cover;

background-image: url(1.jpg);

}

最后,在文字上使用mix-blend-mode属性,取值于背景色相同。

.dark h1 { mix-blend-mode: darken; }

HTMLEAF

你可以尝试选择并修改上面的文字...

也就是说,如果背景是黑色的,使用darken属性。如果背景是白色的,那么就使用lighten属性。

HTMLEAF.COM

你可以尝试选择并修改上面的文字...

效果是不是非常不错呢?如果浏览器不支持mix-blend-mode属性,用户只会看到文本,没有遮罩效果。另外,这些文字是一些纯文本,你可以复制它们,甚至可以修改它们。

文字和图片对换

如果你想要图片占主导地位,而不是文字,值需要稍微的修改一下代码即可:

HTMLEAF

7c43b85ac55d297a2921a76d71cc136c.png

这里的文字不能够进行选择了

Chicago

...

的样式和前面是一样的,只是没有backgroud属性。图片被使用绝对定位放置在文字的上面。

div.dark {

text-align: center;

position: relative;

background: #000;

}

.dark h1 {

margin: 0;

font-size: 20vw;

text-transform: uppercase;

font-family: Montserrat, sans-serif;

line-height: 1.9;

color: #fff;

}

div.dark img {

position: absolute;

top: 0;

left: 0;

width: 100%;

}

最后为图片设置mix-blend-mode属性。

.dark img { mix-blend-mode: darken; }

属性的取值同样遵循上面的规则。

小结

CSS Blend modes是一个新的CSS3属性,在UI界面设计和网页开发中非常有用处。希望这篇文章对你有所帮助。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值