CSS implements mask function

Previous words

CSS masks were added to the webkit engine by Apple in April 2008. Masking provides the ability to control the transparency of an element on a pixel level, similar to the effect of the alpha transparency channel in png24-bit or png32-bit. This article will introduce CSS mask mask in detail

Overview

The image is composed of three channels of rgb and the color defined on each pixel. But above them there is a fourth channel, the alpha channel, which defines the transparency on each pixel via brightness. White means opaque, black means transparent, and gray in between means translucent. Copyright belongs to the author.

The function of mask is to use a transparent picture or gradient to mask the background of the element. Therefore, the mask mask is very similar to the background, except that there is no color sub-attribute, and the remaining 6 sub-attributes of the background background, mask all have

. The mask mask is a composite attribute, including mask-image, mask- The eight attributes mode, mask-repeat, mask-position, mask-clip, mask-origin, mask-size, and mask-composite

[Note] IE browser does not support it, and browsers with webkit kernel ( Including chrome, safari, IOS, android) you need to add the -webkit- prefix. It is important to note that the Firefox browser also supports the webkit-mask attribute

[mask-image]

The default value is none, the value is a transparent image, or a transparent gradient

[mask-repeat]

The default value is repeat, the optional value is the same as background-repeat, the details are here

[mask-position]

Default value is 0 0, the optional value is the same as background-position, the details are here

[mask-clip]

The default value is border-box, the optional value is the same as background-clip , the details are here

[mask-origin]

The default value is border-box, the optional value is the same as background-origin, the details are here

【mask-size】

The default value is auto, the optional value is the same as background-size, the details are here

【mask-mode】

The default value is match-source, the optional values ​​are alpha, luminance, match-source, or their combination

[mask-composite]

The default value is add, the optional values ​​are add, subtract, intersect, exclude

[Note] Only firefox supports mask-mode and mask-composite

Instance

nbsp;html><meta><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><p></p><p></p>    <script>var oBox = document.getElementById(&#39;mask&#39;);
oBox.onmousemove = function(e){
    e = e || event;
    oBox.style.WebkitMaskPosition=(e.clientX-50)+"px "+ (e.clientY-50)+"px";
}    
</script>

　

The above is the detailed content of CSS implements mask function. For more information, please follow other related articles on the PHP Chinese website!