Home > Developer > Web Develop
CSS masks were added to the WebKit engine by Apple in April 2008. Masks provide a pixel-level ability to control the transparency of an element, similar to the effect of an alpha transparent channel in a png24 bit or png32 bit. This article describes the CSS mask mask in detail
Masking mask is the ability to use a transparent picture or a gradient matte element's background. As a result, mask mask and background background very similar, in addition to no color sub-attributes, background background The remaining 6 sub-attributes, mask has
Mask Mask is a composite property that includes Mask-image, Mask-mode, Mask-repeat, Mask-position, Mask-clip, Mask-origin, Mask-size, Mask-composite these 8 properties
Note Internet Explorer does not support the WebKit kernel browser (including Chrome, Safari, IOS, Android) need to add-webkit-prefix. It is important to note that the Firefox browser also supports the Webkit-mask property
"Mask-image"
The default value is None, the value is a transparent picture, or a transparent gradient
"Mask-repeat"
The default value is repeat, and the optional value is the same as Background-repeat, where the details are
"Mask-position"
The default value is 0 0, and the optional value is the same as background-position, where details are
"Mask-clip"
The default value is Border-box, and the optional value is the same as Background-clip, where the details are
"Mask-origin"
The default value is Border-box, and the optional value is the same as Background-origin, where the details are
"Mask-size"
The default value is auto, and the optional value is the same as background-size, where details are
"Mask-mode"
The default value is Match-source, with an optional value of alpha, luminance, match-source, or a combination of them
"Mask-composite"
The default value is add, the optional value is add, subtract, intersect, exclude
[note] Only Firefox supports Mask-mode and Mask-composite
Instance<!DOCTYPE HTML><HTMLLang= "en"><Head><MetaCharSet= "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><Divclass= "Wrap"> <DivID= "Mask"></Div> </Div><Script>varOBox=document.getElementById ('Mask'); Obox.onmousemove= function(e) {e=e||event; OBox.style.WebkitMaskPosition=(E.clientx- -)+"px"+(E.clienty- -)+"px";} </Script></Body></HTML>
CSS Mask Mask
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
