CSS 屬性 mask 允許使用者通過遮罩或者裁切特定區(qū)域的圖片的方式來隱藏一個元素的部分或者全部可見區(qū)域徒欣。
這是一個非常有趣的元素逐样，可以實現(xiàn)元素遮罩部分，點擊查看mdn-mask的文檔
也可以通過如下的demo來了解這個屬性的有趣之處打肝，我們實現(xiàn)的效果如下
demo
這個demo并不是一張圖片脂新，而是兩張圖片在一起實現(xiàn)的效果，只需要加一行mask即可實現(xiàn)粗梭，代碼如下
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mask demo</title>
<style>
.box{
position: relative;
width: 500px;
height: 400px;
background: url(./img3.jpg) no-repeat;
background-size: cover;
margin: 80px auto;
}
.box::after{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./img5.jpg) no-repeat;
background-size: cover;
-webkit-mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
可以自行copy代碼查看效果争便，利用mask來實現(xiàn)的圖片重疊，接下來是切角
切角效果圖
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>mask demo</title>
<style>
.box{
position: relative;
width: 500px;
height: 400px;
background: url(./img3.jpg) no-repeat;
background-size: cover;
margin: 80px auto;
/* 圖片切角 */
-webkit-mask:
linear-gradient(135deg, transparent 15px, #fff 0)
top left,
linear-gradient(-135deg, transparent 15px, #fff 0)
top right,
linear-gradient(-45deg, transparent 15px, #fff 0)
bottom right,
linear-gradient(45deg, transparent 15px, #fff 0)
bottom left;
-webkit-mask-repeat: no-repeat;
mask:
linear-gradient(135deg, transparent 15px, #fff 0)
top left,
linear-gradient(-135deg, transparent 15px, #fff 0)
top right,
linear-gradient(-45deg, transparent 15px, #fff 0)
bottom right,
linear-gradient(45deg, transparent 15px, #fff 0)
bottom left;
mask-repeat: no-repeat;
}
.box::after{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: url(./img5.jpg) no-repeat;
background-size: cover;
-webkit-mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
很有意思的屬性断医，大家可以自己試試滞乙，不過mask兼容性很差
關(guān)于瀏覽器的支持程度
mask支持程度
