Home > Web Front-end > CSS Tutorial > css skills: how to add a mask to an image (share)

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

奋力向前
Release: 2021-07-28 10:13:59
Original
5292 people have browsed it

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!

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

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*/
}
Copy after login

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:

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

Post-processing:

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

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template