首页 > 其他分享> 文章详细

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

2020-01-15 23:03:18 阅读：355 来源： 互联网

标签：image mask background webkit position 0px CSS

说明

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

图片描述

看了这个等式，似乎明白点什么了吧，朋友们，第一张图就是一张普通的图，第二张图，黑色部分是不透明的，白色部分是透明的，用上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 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("http://img.blog.csdn.net/20170701221659356");

        /* 取值是图片路径 */
        -webkit-mask-image:url("http://img.blog.csdn.net/20170701221732018");
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

background-image

图片描述

-webkit-mask-image

图片描述

效果图

图片描述

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
    .mask{
        width:475px;
        height:260px;
        background-image:url("http://img.blog.csdn.net/20170701221659356");

        /* 取值是渐变色 */
        -webkit-mask-image:linear-gradient(blue, transparent);
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

效果图

图片描述

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

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

图片描述

<!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;
        <!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/1534750163.jpg");
        -webkit-mask-image:url("http://www.kkkk1000.com/images/1534750222.jpg");
        animation:mask 5s linear infinite forwards;
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>
        animation:mask 5s linear infinite forwards;
    }
  </style>
 </head>
 <body>
    <div class="mask"> </div>
 </body>

</html>

总结

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

这里写图片描述

标签：image,mask,background,webkit,position,0px,CSS
来源： https://www.cnblogs.com/jlfw/p/12199171.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

说明

解释

总结