前面的话

　　CSS遮罩是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位或png32位中的alpha透明通道的效果。本文将详细介绍CSS遮罩mask

概述

　　遮罩mask的功能就是使用透明的图片或渐变遮罩元素的背景。于是，遮罩mask与背景background非常类似，除了没有color子属性，背景background剩下的6个子属性，mask都有

　　遮罩mask是一个复合属性，包括mask-image、mask-mode、mask-repeat、mask-position、mask-clip、mask-origin、mask-size、mask-composite这8个属性

　　[注意]IE浏览器不支持，webkit内核的浏览器(包括chrome、safari、IOS、android)需要添加-webkit-前缀。要特别注意的是，firefox浏览器也支持webkit-mask属性

【mask-image】

　　默认值为none，值为透明图片，或透明渐变

【mask-repeat】

　　默认值为repeat，可选值与background-repeat相同，详细情况移步至此

【mask-position】

　　默认值为0 0，可选值与background-position相同，详细情况移步至此

【mask-clip】

　　默认值为border-box，可选值与background-clip相同，详细情况移步至此

【mask-origin】

　　默认值为border-box，可选值与background-origin相同，详细情况移步至此

【mask-size】

　　默认值为auto，可选值与background-size相同，详细情况移步至此

【mask-mode】

　　默认值为match-source，可选值为alpha、luminance、match-source，或者它们的组合

【mask-composite】

　　默认值为add，可选值为add、subtract、intersect、exclude

　　[注意]只有firefox支持mask-mode和mask-composite

实例

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

.wrap{

    position:absolute;

    width: 400px;

    border:1px solid black;

}

#mask{

    height: 300px;

    background:url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/dongzhi.jpg) lightblue;

    -webkit-mask:  url(http://sandbox.runjs.cn/uploads/rs/142/wat3wtnz/mask.png) no-repeat;

    animation: 2s maskPosition infinite alternate ;

}

#mask:hover{

    animation: none;

}

@keyframes maskPosition{

    0%{-webkit-mask-position:0 0;}

    100%{-webkit-mask-position:100% 100%;}

}

</style>

</head>

<body>

<div class="wrap">

    <div id="mask"></div>

</div>

<script>

var oBox = document.getElementById('mask');

oBox.onmousemove = function(e){

    e = e || event;

    oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";

}

</script>

</body>

</html>

　　

CSS遮罩mask的更多相关文章

  1. CSS遮罩——如何在CSS中使用遮罩

    Css遮罩是2008年4月由苹果公司添加到webkit引擎中的.遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果. 图像是由rgb三个 ...

  2. [转]CSS遮罩——如何在CSS中使用遮罩

    特别声明:此篇文章由D姐根据Christian Schaefer的英文文章原名<CSS Masks – How To Use Masking In CSS Now>进行翻译,整个译文带有我 ...

  3. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  4. CSS遮罩效果和毛玻璃效果

    前面的话 本文将详细介绍CSS遮罩效果和毛玻璃效果 遮罩效果 普通遮罩 一般地,处理全屏遮罩的方法是使用额外标签 <style>.overlay{ position:fixed; top: ...

  5. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...

  6. css案例 - mask遮罩层的华丽写法

    mask遮罩蒙层使用通常的写法的bug 通常写法pug .mask 通常写法css .mask{ position: absolute; top: 0; right: 0; bottom: 0; le ...

  7. css遮罩代码（已验证）

    #mask { background-color: rgb(0, 0, 0); display:none; opacity: 0.0; /* Safari, Opera */ -moz-opacity ...

  8. css遮罩蒙版效果 分栏效果

    mask遮罩蒙版效果 来看一下效果图: 这是两张原图: 遮罩层图像 注意,白色区域为透明状态   要展示的图像 使用mask之后产生的效果图   首先来解释一下遮罩.蒙版.和PS中的蒙版.Flash中 ...

  9. CSS 遮罩层、滑出页面

    <style> .panel_bak { position:fixed; bottom:0; display:none; width:100%; margin:0px; padding:5 ...

随机推荐

  1. 【Codeforces 331D3】Escaping on Beaveractor

    题意:给\(b\times b\)的网格,其中有\(n\)个不交叉的箭头. 现在有\(q\)个询问,每个询问包含一个点\((x,y)\),以及一个方向\(dir\).时间\(t\). 要求从\((x, ...

  2. Android 解决Toast一直显示个不停的问题

    做程序的时候最常用的弹出大概就是Toast了.但有时候会发先一个特别尴尬的问题,就是:一旦你点击某个按钮次数多了,即使在程序退出后,Toast也弹个不停.什么原因造成的呢? 是这样的:我们为了方便,在 ...

  3. Luogu4546 THUWC2017 在美妙的数学王国中畅游 LCT、泰勒展开

    传送门 题意:反正就是一堆操作 LCT总是和玄学东西放在一起我们不妨令$x_0=0.5$(其实取什么都是一样的,但是最好取在$[0,1]$的范围内),将其代入给出的式子,我们得到的$f(x)$的式子就 ...

  4. ionic 访问odoo11之具体业务类api接口

    在前面测试通过odoo登录的功能,这次的问题重点是如何访问后台具体的业务类的接口呢?这次就以我们在odoo中安装的lunch模块为例,目标是获取lunch.alert的数据,如下图 具体过程接上次文章 ...

  5. item 1：理解template类型的推导

    本文翻译自modern effective C++,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 一些用户对复杂的系统会忽略它怎么工作,怎么设计的,但是很高兴去知道它完成的一些事.通过这 ...

  6. 我的devops实践经验分享一二

    前言 随着系统越来越大,开发人员.站点.服务器越来越多,微服务化推进,......等等原因,实现自动化的devops越来越有必要. 当然,真实的原因是,在团队组建之初就预见到了这些问题,所以从一开始就 ...

  7. SC1243sensor噪点问题调试

    接手一块SC1243sensor的板子调试,仔细核对了原理图和PCB发现,PCB不是很好,电源处理不够好,但是出图了,问题是有噪点,麻点,根据经验要求软件修改了PCLK的极性噪点消失,问题解决. 1: ...

  8. Centos下DNS+NamedManager高可用部署方案完整记录

    之前说到了NamedManager单机版的配置,下面说下DNS+NamedManager双机高可用的配置方案: 1)机器环境 主机名 ip地址 dns01.kevin.cn 192.168.10.20 ...

  9. libc.so.6: version 'GLIBC_2.14' not found报错提示的解决方案

    线上一台服务器在执行leveldb程序的时候,报错:"libc.so.6: version `GLIBC_2.14' not found". 排查原因及解决方法如下: 1)产生原因 ...

  10. Gerrit上分支操作记录（创建分支、删除分支）

    Git分支对于一个项目的代码管理而言,是十分重要的!许多久用git的朋友可能已经掌握的很牢固了,但对于一些初涉git的童鞋来说,可能还不是很熟悉.在此,我将自己的一些操作经历做一梳理,希望能帮助到有用 ...