<!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>
相关文章：