CSS实现遮罩mask功能
作者: default|标签:Mask 样式表 CSS|2018-5-17 14:29

前面的话

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

概述

图像是由rgb三个通道以及在每个像素上定义的颜色组成的。但是在他们之上还有第四个通道,alpha通道,通过亮度定义每个像素上的透明度。白色意味着不透明,黑色意味着透明,介于黑白之间的灰色表示半透明。著作权归作者所有。

  遮罩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() lightblue;-webkit-mask:  url() 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><p class="wrap"><p id="mask"></p>    </p><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功能的详细内容,更多请关注php中文网其它相关文章!

410
点赞
收藏
分享:
0/300