You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Abstract: CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.
16
-
Abstract:
16
+
Abstract:
17
17
Abstract: Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element's parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.
18
-
Abstract:
18
+
Abstract:
19
19
Abstract: Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.
20
20
Test Suite: http://test.csswg.org/suites/css-masking/nightly-unstable/
21
+
Use <i> Autolinks: yes
21
22
</pre>
22
23
23
24
<styletype="text/css">
@@ -61,7 +62,7 @@ <h3 id="masking">Masking</h3>
61
62
62
63
Masks are applied using the 'mask-image' or 'mask-border-source' properties.
63
64
64
-
The 'mask-image' property may reference a <aelement>mask</a> element. The content of the <aelement>mask</a> element serves as the mask.
65
+
The 'mask-image' property may reference a <aelement>mask</a> element. The content of the <aelement>mask</a> element serves as the mask.
65
66
66
67
Alternatively, for many simple uses, the 'mask-image' property may refer directly to images to be used as mask, forgoing the need for an explicit <aelement>mask</a> element. This mask can then be sized and positioned just like CSS background images using the 'mask-position', 'mask-size' and other characterizing properties.
67
68
@@ -241,7 +242,7 @@ <h3 id="the-clip-path">Clipping Shape: the 'clip-path' property</h3>
Note: A value of ''none'' in a list of <<mask-reference>>s may influence the masking operation depending on the used compositing operator specified by 'mask-composite'.
391
392
392
-
Note: A <<mask-source>> counts as mask layer and can be combined in a repeatable <<mask-reference>> list with <<image>> or further <<mask-source>> list items.
393
+
Note: A <<mask-source>> counts as mask layer and can be combined in a repeatable <<mask-reference>> list with <<image>> or further <<mask-source>> list items.
393
394
394
395
Note: An element can also be masked with 'mask-border-source'. See 'mask-border-source' for the interaction of that property with 'mask-image'.
395
396
@@ -556,7 +557,7 @@ <h3 id="the-mask-clip">Masking Area: the 'mask-clip' property</h3>
556
557
Values have the following meanings:
557
558
558
559
<dldfn-for=mask-clipdfn-type=value>
559
-
<dt><dfn>content-box</dfn></dt>
560
+
<dt><dfn>content-box</dfn></dt>
560
561
<dd>
561
562
The painted content is restricted to (clipped to) the <em>content box</em>.
0 commit comments