简单说 CSS中的mask—好好利用mask-image

痛定思痛。 2023-10-11 16:36 2阅读 0赞

#### 说明 ####

CSS中的mask属性允许用户屏蔽或剪裁特定点的图像来实现，部分或完全隐藏某个元素的可见性。  
好吧，这个概念可能有点不好理解，先看图。

![53de03aced9346b1abbd2ee47e07f7df.png][]

看了这个等式，似乎明白点什么了吧，朋友们，第一张图就是一张普通的图，第二张图，黑色部分是不透明的，白色部分是透明的，用上mask之后，两张图重叠，黑色区域中的会显示出来，白色区域不显示。

用过ps的朋友，应该很清楚，蒙版这东西，这就和蒙版很像，好吧，没用过ps的朋友，又要问蒙版是什么了，相信看完这篇文章，你应该连蒙版也知道了。

mask和background用法是相仿的，mask的值有这些

mask-clip
    mask-composite
    mask-image
    mask-mode
    mask-origin
    mask-position
    mask-repeat
    mask-size
    mask-type

具体细节参考这里：  
[CSS background 属性][CSS background]  
[CSS mask 属性][CSS mask]

#### 解释 ####

由于目前，只有webkit内核的浏览器支持mask属性，所以考虑到兼容性的话，用mask属性的时候还是要想想的。

今天我们主要说说 mask-image，这个比较有意思，这两个单词翻译过来就是，面具 图片，的确很形象，真的就像是给元素带上一个面具一样。  
我们直接上代码，把上面提到那个等式，实现一下，顺便说一句，mask-image 和 background-image 一样，不仅可以取值是 图片路径，也可以是渐变色。

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
    
      <style>
        .mask{
            width:475px;
            height:260px;
            background-image:url("https://img-blog.csdn.net/20170701221659356");
    
            /* 取值是图片路径 */
            -webkit-mask-image:url("https://img-blog.csdn.net/20170701221732018");
        }
      </style>
     </head>
     <body>
        <div class="mask"> </div>
     </body>
    
    </html>

**background-image**

**![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55uP6Iy25L2c6YWS_size_16_color_FFFFFF_t_70_g_se_x_16][]**

**-webkit-mask-image**

**![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55uP6Iy25L2c6YWS_size_16_color_FFFFFF_t_70_g_se_x_16 1][]**

**效果图**

**![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55uP6Iy25L2c6YWS_size_16_color_FFFFFF_t_70_g_se_x_16 2][]**

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
    
      <style>
        .mask{
            width:475px;
            height:260px;
            background-image:url("https://img-blog.csdn.net/20170701221659356");
    
            /* 取值是渐变色 */
            -webkit-mask-image:linear-gradient(blue, transparent);
        }
      </style>
     </head>
     <body>
        <div class="mask"> </div>
     </body>
    
    </html>

**效果图**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55uP6Iy25L2c6YWS_size_16_color_FFFFFF_t_70_g_se_x_16 3][]

我再善意的提醒下，-webkit-mask-image 的值应该是一张，背景是透明色的图，或者说有透明色，而透明色的区域，最后都是不显示的。

下面是mask 和 animation 配合完成的一个效果  
**效果图**

**![b0ffe1e0a1b248dca7b297345719dc14.gif][]**

<!doctype html>
    <html lang="en">
     <head>
      <meta charset="UTF-8">
    
      <style>
         @keyframes mask{
            0% {-webkit-mask-position:0px 0px;}
            25% {-webkit-mask-position:619px 0px;}
            50% {-webkit-mask-position:0px 0px;}
            75% {-webkit-mask-position:308px 0px;-webkit-mask-size:100%;}
            100% {-webkit-mask-size:1000%;}
         }
    
        .mask{
            width:700px;
            height:392px;
            background:black url("http://www.kkkk1000.com/images/mask-image/1534750163.jpg");
            -webkit-mask-image:url("http://www.kkkk1000.com/images/mask-image/1534750222.jpg");
            animation:mask 5s linear infinite forwards;
        }
      </style>
     </head>
     <body>
        <div class="mask"> </div>
     </body>
    
    </html>

#### 总结 ####

说了这么多相信你也一定明白mask-image属性了，如果还是不清楚，那就多看看下面这张图吧！！！

![23dd09b9724c48b7b3f39a95a699f04f.gif][]

借助CSS mask遮罩显著优化PNG图片的尺寸

#### 一、无法进一步压缩的PNG图片 ####

例如有如下所示的PNG图片（尺寸1/2显示了），使用顶级的PNG工具压缩后还有122K。

![卡片图片示意][7f200dd11bc81439b31ef6615110c6a6.png]

原图地址这里：[https://image.zhangxinxu.com/image/blog/202005/card.png][https_image.zhangxinxu.com_image_blog_202005_card.png]

PNG尺寸大小示意如下：

![PNG图片尺寸示意][PNG]

如果项目就一张这样的图还好，要是页面一下子有很多这么个尺寸的PNG，那对首次加载的性能影响就非常明显了，例如下图4张卡片图就有500K。

![多个卡片图尺寸][f57cabf277313e6b1a77a9928c78ee94.png]

由于卡片的背景也是复杂图形，边边角角必须要透明，改成JPG格式肯定不行（边角会变成纯色），就没有什么可以进一步优化的方法吗？

![边角需要透明][8ebcaf30c3652a66e1c28202b2625a05.png]

有，那就是借助CSS mask遮罩显著优化PNG图片的尺寸。

#### 二、mask-image与PNG尺寸优化 ####

`mask-image`遮罩有这样一个功能，只有遮罩图片存在的区域才显示，那岂不是如果是一个边角透明的任意遮罩图，就可以让JPG图片边角的白色透明了。

方法可行，[demo这里][demo]。

具体做法如下。

1. PNG转JPG

先把PNG图片保持成JPG，图片质量50%就足够了，如下图所示：

![卡片图片示意][ab7e496534f1a46769907de40aedabae.png]

此时，图片的尺寸可以减小超过50%！

![JPG图片的尺寸][JPG]

2. 根据PNG轮廓制作纯色PNG

PNG图片之所以尺寸大，就是因为色彩过于丰富，如果我们变成纯色，尺寸可以降低100倍不止。

![轮廓纯色填充][68c07c74151238d76e79581f760d8de5.png]

此时的纯黑色颜色填充PNG图片的尺寸不足1K：

![填充PNG图片尺寸][PNG 1]

3. 使用遮罩让JPG边角白色透明

假设JPG卡片图使用的是`<img>`元素，HTML代码如下：

使用如下的CSS代码：

img {
        -webkit-mask-image: url(card-mask.png);
        mask-image: url(card-mask.png);
    }

就可以有和原始122K大小PNG图片一样的效果的了，边角透明，尺寸还小。

因为card-mask.png的4个边角是透明的，所以card.jpg应用card-mask.png作为遮罩图片后，边角也跟着透明了。

4. 遮罩图片的跨域限制

随着Chrome等浏览器的安全升级，遮罩图片目前有跨域访问限制，会有类似下面的错误提示：

> Access to image at ‘https://image.zhangxinxu.com/…/card-mask.png’ from origin ‘https://www.zhangxinxu.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

我们可以把纯色遮罩图变成base64格式的，例如：

img {
        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZQAAAJ8BAMAAAArFErhAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAABnRSTlMKPam81se4yTyxAAADc0lEQVR42uzYMUqDQRRG0SSC9R8La0WwFgWX4DqM4Ox/CbZaOGnvJOfs4FaP7+3+OrytY9tNHcY6Hq4m5Was40zK7VjHy+WkfM5T7sc6zqQ8j3Wc5invYx1f85SxkmnJfqxku5Sz8t9h+RgL+5YSJKVISpGUIilFUoqkFP1O2a806Scb7Hj3NFb3+njcb0u9i6ZOUoKkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpRVKKpBRJKZJSJKVISpGUIilFUoqkFEkpklIkpUhKkZQiKUVSiqQUSSmSUiSlSEqRlCIpP+zPsQAAAADAIH/raXQsg0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0RXRFdEV0S1Yy8nDAMxEIZnE8h53YFJIOeQIlJH/FL/JRjfjA06z6zn6+C/SEhOYeQURk2loHSvUPftKio25R3K5oqdXwhb4BQ+TmHkFEZOYeQURk5h5BRGC3B2DyU9EiWUVGRCyISU0mU8tpMyICP1Svoj9QgduxT1afxpJ6VH6hY6LpTy1HFc9isiYS/oBPlGYwAAAABJRU5ErkJggg==);
    }

--------------------

眼见为实，您可以狠狠地点击这里：[PNG图片使用CSS遮罩尺寸优化demo][demo]

JPG格式卡片最终实现效果如下图所示（四个角透明了）：

![实现的效果截图][67ce0403eb341aa3cbaf7f6cd0175b1c.png]

#### 三、优化后的效果对比 ####

优化前后4张图大小对比如下：

![图片大小前后对比][297edce5afcc95f242ff7406193fadbb.png]

原来4张图片支持是458K，优化后的图片尺寸是197K+1K，大小减小了56.8%！

酷儿~

`mask-image`这种移动端很早很早就已经支持了，这里使用的又是传统语法，完全没有任何兼容性问题，大家可以放心使用。

是不是又学到了一招？

[53de03aced9346b1abbd2ee47e07f7df.png]: https://img-blog.csdnimg.cn/53de03aced9346b1abbd2ee47e07f7df.png
[CSS background]: https://link.segmentfault.com/?enc=hvn5k130M49siMsFLON9Vw%3D%3D.IDh993ZJH24cxsZu%2B7XqqEbdRXRYVGMccc%2FCxukaG9V57CaF9CshG4sq%2FhF4Tmv4VilF8r3uzJiD4UZGwURrbw%3D%3D
[CSS mask]: https://link.segmentfault.com/?enc=DRuLuss5x2lwFw%2BGH2zW3g%3D%3D.W%2B3c4Uc59PjLnozjSWqlbZD4vhRnPELdhpkmz4GbeumEcdCkbZifJU4KftwzBD94jKxJgUTFFD6%2BPJhE9MD6Ag%3D%3D
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55uP6Iy25L2c6YWS_size_16_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/cc1f866272004042bf84a8dfb3577036.jpg?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55uP6Iy25L2c6YWS,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55uP6Iy25L2c6YWS_size_16_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/2aa368daff7340b5bee31da03a92d811.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55uP6Iy25L2c6YWS,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55uP6Iy25L2c6YWS_size_16_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/9c4ae67dc79f4208b8bd86574be4548d.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55uP6Iy25L2c6YWS,size_16,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA55uP6Iy25L2c6YWS_size_16_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/da508e53008e4422b77769cba2dcc69e.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA55uP6Iy25L2c6YWS,size_16,color_FFFFFF,t_70,g_se,x_16
[b0ffe1e0a1b248dca7b297345719dc14.gif]: https://img-blog.csdnimg.cn/b0ffe1e0a1b248dca7b297345719dc14.gif
[23dd09b9724c48b7b3f39a95a699f04f.gif]: https://img-blog.csdnimg.cn/23dd09b9724c48b7b3f39a95a699f04f.gif
[7f200dd11bc81439b31ef6615110c6a6.png]: https://img-blog.csdnimg.cn/img_convert/7f200dd11bc81439b31ef6615110c6a6.png
[https_image.zhangxinxu.com_image_blog_202005_card.png]: https://image.zhangxinxu.com/image/blog/202005/card.png
[PNG]: https://img-blog.csdnimg.cn/img_convert/f44626f03af4124b35bc4dbd820983fe.png
[f57cabf277313e6b1a77a9928c78ee94.png]: https://img-blog.csdnimg.cn/img_convert/f57cabf277313e6b1a77a9928c78ee94.png
[8ebcaf30c3652a66e1c28202b2625a05.png]: https://img-blog.csdnimg.cn/img_convert/8ebcaf30c3652a66e1c28202b2625a05.png
[demo]: https://www.zhangxinxu.com/study/202005/png-compress-by-mask-demo.php
[ab7e496534f1a46769907de40aedabae.png]: https://img-blog.csdnimg.cn/img_convert/ab7e496534f1a46769907de40aedabae.png
[JPG]: https://img-blog.csdnimg.cn/img_convert/4b47b9ac6d1860700df4a89401db8862.png
[68c07c74151238d76e79581f760d8de5.png]: https://img-blog.csdnimg.cn/img_convert/68c07c74151238d76e79581f760d8de5.png
[PNG 1]: https://img-blog.csdnimg.cn/img_convert/18808550607dd35167dc8470eb8067de.png
[67ce0403eb341aa3cbaf7f6cd0175b1c.png]: https://img-blog.csdnimg.cn/img_convert/67ce0403eb341aa3cbaf7f6cd0175b1c.png
[297edce5afcc95f242ff7406193fadbb.png]: https://img-blog.csdnimg.cn/img_convert/297edce5afcc95f242ff7406193fadbb.png