The final resultant image built from putting all of the mask images together, tiling them, stretching them, etc., then becomes the mask used to clip the content. A border-image can then potentially be stretched or tiled over the backgrounds. Multiple backgrounds are stacking on top of one another (possibly overlapping) with their own tiling and clipping rules. The mask will therefore overlay the child and all of its descendants, and at a minimum will knock out everything outside the border box of the object.įrom a Web designer’s perspective, think of the mask as being constructed the way the backgrounds and border-image of a box are constructed. Use of a mask results in a stacking context being created (similar to how opacity and transforms work). webkit-mask-composite (background-composite) webkit-mask-attachment (background-attachment) The new properties are analogous to the background and border-image properties that already exist. We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. This is in fact a mask applied to the element.
#Css webkit movie#
Here is a snapshot of the Speed Racer movie trailer clipped to the Safari compass icon. In other words, you can clip to complex shapes based off the alpha of an image. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display.
0 kommentar(er)
