简述CSS的mask属性

技巧•2年前• 隔壁老李于 2023-01-30 11:15:45 最后编辑

文章总结

AI正在生成摘要

CSS的mask属性允许通过遮罩或裁切图片区域来隐藏元素部分或全部。支持多种值，如url、luminance等，并支持全局值如inherit、initial等。通过mask属性可以轻松实现图片与渐变透明效果，提高网页设计灵活性。

水这篇是为了刷一下存在感，毕竟上一篇是说自己去羊村玩了~~

CSS 的 mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

/* Keyword values */
mask: none;

/* Image values */
mask: url(mask.png);                       /* 使用位图来做遮罩 */
mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 */

/* Combined values */
mask: url(masks.svg#star) luminance;       /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px;       /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘 40px，离左边缘 20px */
mask: url(masks.svg#star) 0 0/50px 50px;   /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是 50px */
mask: url(masks.svg#star) repeat-x;        /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box;      /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude;         /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */

/* Global values */
mask: inherit;
mask: initial;
mask: unset;

比如下面这样一张图片，叠加上一个从透明到黑色的渐变

简述CSS的mask属性第1张

background: url(image.png) ;
mask: linear-gradient(90deg, transparent, #000);

为了浏览器兼容性，添加webkit内核兼容：

background: url(image.png) ;
mask: linear-gradient(90deg, transparent, #000);
-webkit-mask: linear-gradient(90deg, transparent, #000);

应用了 mask 之后，就会变成这样：

简述CSS的mask属性第2张

结论：图片与 mask 生成的渐变的 transparent 的重叠部分，将会变得透明。

值得注意的是，上面的渐变使用的是 linear-gradient(90deg, transparent, #000)，这里的 #000 纯色部分其实换成任意颜色都可以，不影响效果。

完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>mask</title>
<style>
body{
padding: 0px;
margin: 0px;
}
.mask{
background: url(1.jpg);
height:100vh;
background-size: cover;
mask: linear-gradient(90deg, transparent, #000);
-webkit-mask: linear-gradient(90deg, transparent, #000);
}
</style>
</head>
<body>
<div class="mask"></div>
</body>
</html>

一个使用栗子：

每年国庆节，微信朋友圈就会流行起给头像装饰上国旗。

简述CSS的mask属性第3张

这种效果可以使用 mask 属性轻易实现：

简述CSS的mask属性第4张

完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>国旗头像</title>
<style>
.mask {
    position: relative;
    margin: auto;
    width: 400px;
    height: 400px;
    background: url(img1.jpg) no-repeat;
    background-size: cover;
}
.mask::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url(img2.jpg) no-repeat;
    background-size: cover;
    mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
    -webkit-mask: linear-gradient(110deg, #000 10%, transparent 70%, transparent);
}
</style>
</head>
<body>
<div class="mask"></div>
</body>
</html>