CSS实现遮罩mask功能-html教程-PHP中文网

CSS实现遮罩mask功能

巴扎黑

发布： 2018-05-17 14:29:34

原创

5338 人浏览过

前面的话

　　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中文网其他相关文章！