巧用CSS遮罩

mtunique 发布于2019-08-05 18:19 / 3146人阅读

摘要：用法样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。其实可以利用变色，而利用遮罩去绘制图标。遮罩透过的地方是图标的填色部分，而遮罩盖过的地方则没有颜色。

1. 用法

-webkit-mask样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。如果遮罩图某个像素点透明度为1则显示下方的图像，透明度为0则不显示，介于0-1之间则呈现相应的透明度。
详情参考 mask - CSS | MDN
可以看到，mask的语法基本上拷贝自background，可以设置遮罩的url, position, repeat, size等属性，但不能直接设置颜色（纯色的遮罩意味着用opacity就能实现）。-webkit-mask-url可以设置gradients的渐变图片，也可以设置base64编码的图片。

2. 利用mask实现图标变色

想让图标可以任意变色，常见的方案有：font-awesome, SVG等，甚至还有drop-shadow。其实可以利用background变色，而利用遮罩去绘制图标。遮罩透过的地方是图标的填色部分，而遮罩盖过的地方则没有颜色。
这种方法的优点就是转换成本极低，可以直接利用已有的图标PNG图。具体方法如下：

将图标保存为PNG图，注意非图标区域应该是透明的。如果原有图标是sprite图，没关系，不用变，因为mask支持position属性。原先输出的图标不是纯黑色的？也没关系，因为mask样式只认你图片的透明通道

设置图标的CSS，例如：

.m-mask{
    width:141px;
    height:141px;
    -webkit-mask-image: url(mask.png);
    background: #3f51b5;
}

这样就好了，效果如下

完全可以把此时的background-color理解成Photoshop中的颜色叠加

如果结合less sass，就可以做到自定义换肤了

3.利用mask修复圆角头像的毛边

在实际的开发过程中，发现在较高版本的Chrome浏览器中，我们的圆角头像出现了无法容忍的毛边，定位到问题的原因是这样的：外层div利用background设置了垫底的默认图，设置了border-radius:50%。而内层的img为实际头像图，也设置了border-radius:50%。理论上两个相等大小、相同圆角的元素，也未设置任何定位，那么应该是头像完整盖着默认图。但实际并未如此，而是头像略小于默认图，因而出现了毛边。

因此我们可以为外层div添加一个样式

-webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==")

url中设置的其实是1像素高宽的黑色图片，那么此时的遮罩就相当于外层div设置圆角区域后的一个不透明的圆形。此时就可以去掉img上的boder-radius了。最后效果如下，完美！

云服务器超融合服务器巧用CSS的MASK滤镜 css遮罩巧用巧用云服务器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/60884.html

巧用CSS遮罩

摘要：用法样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。其实可以利用变色，而利用遮罩去绘制图标。遮罩透过的地方是图标的填色部分，而遮罩盖过的地方则没有颜色。 1. 用法 -webkit-mask样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。如果遮罩图某个像素点透明度为1则显示下方的图像，透明度为0则不显示，介于0...

cocopeak 2019-08-29 11:03 评论0 收藏0
巧用CSS3：target 伪类制作Dropdown下拉菜单（无JS）

摘要：先上效果图正如标题所说，本文是教你如何巧用伪类制作下拉菜单，原生，无。实际例子其实就是主题的右上角那个按钮，你点一下就会有一个下拉菜单出现，在其他区域点击返回原状。为了让下拉菜单更显下拉的情况，采用的定位下转换原点。原文链接：http://devework.com/css3-target-dropdown.html showImg(https://segmentfault.com/...

littleGrow 2019-08-01 14:47 评论0 收藏0
巧用iframe做浮层

摘要：巧用做浮层的诟病太多了，还好标准没有废弃它，其实还是有点用的。做的过程发现页面是可以滑动的，理想的情况当然是锁住页面。父页面域名白名单子页面好了，完成这样的需求，半天都不用。用虽然不是最好的方案，但对于本案例来是最佳的。巧用iframe做浮层 iframe的诟病太多了，还好标准没有废弃它，其实还是有点用的。在开发产品的时候，我们不得不舍弃一些东西来换取效率。我们的需求是，在某些特定...

kyanag 2019-08-20 16:35 评论0 收藏0
巧用iframe做浮层

摘要：巧用做浮层的诟病太多了，还好标准没有废弃它，其实还是有点用的。做的过程发现页面是可以滑动的，理想的情况当然是锁住页面。父页面域名白名单子页面好了，完成这样的需求，半天都不用。用虽然不是最好的方案，但对于本案例来是最佳的。巧用iframe做浮层 iframe的诟病太多了，还好标准没有废弃它，其实还是有点用的。在开发产品的时候，我们不得不舍弃一些东西来换取效率。我们的需求是，在某些特定...

VishKozus 2019-08-01 16:50 评论0 收藏0
有趣的交互系列 - 文字遮罩入场效果

摘要：在这个系列里分享一些简单，但是很有意思的交互效果附上地址和地址滚动，添加对应加载的比如巧用实现文字和遮罩层的动画效果文字动画遮罩层动画首先然后把且，这样就实现了遮罩层的进场和退出效果随机获取数组项在这个系列里分享一些简单，但是很有意思的交互效果~附上demo地址和github地址 showImg(https://makapicture.oss-cn-beijing.aliyuncs....

邹强 2019-08-02 15:13 评论0 收藏0