CSS遮罩mask
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS遮罩mask,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1915字,纯文字阅读大概需要3分钟。
内容图文
![CSS遮罩mask](/upload/InfoBanner/zyjiaocheng/1233/de73c7b4225449da90ea2e4a41d729d3.jpg)
前面的话
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>
原文:http://www.cnblogs.com/xiaohuochai/p/7182507.html
内容总结
以上是互联网集市为您收集整理的CSS遮罩mask全部内容,希望文章能够帮你解决CSS遮罩mask所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。