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

说明

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;
        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属性了,如果还是不清楚,那就多看看下面这张图吧!!!
图片描述


前端简单说
用最简单的话,说前端最难理解的问题!
4.6k 声望
436 粉丝
0 条评论
推荐阅读
JavaScript 中的复制粘贴操作
Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 API (Permissions API) 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取剪贴板内容。

FEWY7阅读 6.2k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.3k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青55阅读 7.8k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

4.6k 声望
436 粉丝
宣传栏