March 1Mar 1 Administrators CSS Masking The CSS mask-image Property CSS masking allows you to create a mask layer to place over an element to partially or fully hide portions of the element. The CSS mask-image property specifies a mask layer image. The mask layer image can be a PNG image, an SVG image, a CSS gradient, or an SVG <mask> element. Use a PNG Image as the Mask Layer To use a PNG image as the mask layer, use a url() value to pass in the mask layer image. The mask image needs to have a transparent or semi-transparent area. Black indicates fully transparent. Here is the mask image ("w3logo.png") we will use: Here is an image from Cinque Terre, in Italy: Now, we apply the mask image as the mask layer for the image from Cinque Terre, Italy: Example Here is the source code: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-repeat: no-repeat; } Try it Yourself » The mask-image property specifies the image to be used as a mask layer for an element. The mask-repeat property specifies if or how a mask image will be repeated. The no-repeat value indicates that the mask image will not be repeated (the mask image will only be shown once). Repeat the Mask Layer Image If we omit the mask-repeat property, the mask image will be repeated all over the image from Cinque Terre, Italy: Example Omit the mask-repeat property: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png);} Try it Yourself » Position the Mask Layer Image The mask-position property sets the starting position of a mask image (relative to the mask position area). By default, a mask image is placed at the top-left corner of an element, and repeated both vertically and horizontally. Here, we position the mask image in center: Example Position the mask layer image: .mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); mask-repeat: no-repeat; mask-position: center; } Try it Yourself » CSS All Masking Properties The following table lists all the CSS masking properties: Property Description mask-clip Specifies which area is affected by a mask image mask-composite Specifies a compositing operation used on the current mask layer with the mask layers below it mask-image Specifies an image to be used as a mask layer for an element mask-mode Specifies whether the mask layer image is treated as a luminance mask or as an alpha mask mask-origin Specifies the origin position (the mask position area) of a mask layer image mask-position Sets the starting position of a mask layer image (relative to the mask position area) mask-repeat Specifies how the mask layer image is repeated mask-size Specifies the size of a mask layer image mask-type Specifies whether an SVG <mask> element is treated as a luminance mask or as an alpha mask ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.