css3蒙版（有些浏览器不好用）

最新推荐文章于 2022-02-07 17:44:12 发布

weixin_30265103

最新推荐文章于 2022-02-07 17:44:12 发布

阅读量127

点赞数

原文链接：http://www.cnblogs.com/adialike/p/6381697.html

版权

<!DOCTYPE html>
<html>
<head>
<title>蒙版</title>
<style type="text/css">
div{
width: 480px;
height: 270px;
border: solid 5px pink;
background-image: url(img/1.jpg);
background-repeat: no-repeat;
/*-webkit-mask-image 蒙版兼容不好只适用于webkit内核的浏览器
蒙版是一种反向操作，蒙版图片上透明的区域在蒙上之后就盖住了背景而蒙版图片上不透明的区域没有盖住后面的背景图*/
-webkit-mask-image: url('img2/1.png');
/*蒙版也有一个是否循环-webkit-mask-repeat*/
-webkit-mask-repeat:no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>