css skills: how to add a mask to an image (share)

Previous article "What is CSS syntax? Detailed introduction to the usage and rules》Introduction to the usage and rules of CSS syntax. The following article will share with you some tips on using CSS to add mask effects to images. This tip is very practical and can help you break the pattern of website layout. It only requires a few lines of code. Come and take a look!

Add Masks

Masks tell your browser which asset elements should be visible, which is useful for building creative shapes and layouts. Masking can be done in three ways using raster images (such as PNG format with transparent parts), CSS gradients or SVG elements.

Note that unlike typical raster images, SVG can be scaled or converted without significant loss of quality.

Attached code:

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

It is worth mentioning that Firefox only supports the latest version, so we need to use inline SVG mask elements. What happens if we use a raster image with transparency levels? Transparent parts of the image will not be seen - in other words, opaque segments will be shown, hiding other parts. Masking is particularly powerful as it enables you to apply the same properties to background images, defining their position, size and repetition.

Pre-processing:

Post-processing:

Transparency levels can be used to cut parts Animated images (e.g. GIF files), when using these attributes don't forget cross-browser support and add the vendor prefix.

Recommended learning: CSS video tutorial

The above is the detailed content of css skills: how to add a mask to an image (share). For more information, please follow other related articles on the PHP Chinese website!