Tips and methods to use CSS to achieve image masking effects

Techniques and methods of using CSS to achieve image masking effects

In web design, adding some special effects to images can improve the user's browsing experience. Among them, the picture mask effect is a common and attractive effect that can add a sense of mystery and beauty to the picture. This article will introduce the techniques and methods of using CSS to achieve image masking effects, and provide specific code examples for reference.

1. Use CSS pseudo elements to achieve image masking effects

In CSS, you can use pseudo elements to add a mask layer and add special effects to it. The following is a basic code example:

<style>
    .image-wrapper {
        position: relative;
        display: inline-block;
    }
    
    .image-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩层 */
        opacity: 0;
        transition: opacity 0.5s ease; /* 过渡效果 */
    }
    
    .image-wrapper:hover::before {
        opacity: 1;
    }
</style>

<div class="image-wrapper">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="图片">
</div>

In the above code, .image-wrapper is the outer div container, and .image-wrapper::before is Is a pseudo element used to add a mask layer. When initialized, the transparency of the mask layer is set to 0, and a transition effect is set. When the mouse is hovering over the image, the transparency of the mask layer is set to 1 through the pseudo-class selector :hover to achieve a gradient mask effect.

2. Use CSS blending modes to achieve image masking effects

In addition to using pseudo elements, you can also use CSS blending modes to achieve image masking effects. Here is an example:

<style>
    .image-wrapper {
        position: relative;
        display: inline-block;
    }
    
    .image-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(mask.png); /* 遮罩层图片 */
        mix-blend-mode: multiply; /* 混合模式，可根据需要调整 */
    }
</style>

<div class="image-wrapper">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="图片">
</div>

In the above code, .image-wrapper remains unchanged, while the background of .image-wrapper::before is set to a mask layer picture. By setting the mix-blend-mode attribute to multiply, the foreground color and background color can be mixed and calculated to achieve a masking effect. It’s important to note that blending modes can be adjusted based on specific needs to achieve the desired effect.

3. Use CSS filters to achieve image masking effects

Another way to achieve image masking effects is to use the filter characteristics of CSS. The following is an example:

<style>
    .image-wrapper {
        position: relative;
        display: inline-block;
    }
    
    .image-wrapper:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩层 */
        opacity: 0;
        transition: opacity 0.5s ease; /* 过渡效果 */
    }
    
    .image-wrapper:hover:after {
        opacity: 1;
    }
    
    .image-wrapper img {
        filter: grayscale(100%); /* 将图片灰度化 */
        transition: filter 0.5s ease; /* 过渡效果 */
    }
    
    .image-wrapper:hover img {
        filter: none;
    }
</style>

<div class="image-wrapper">
    <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" alt="图片">
</div>

In the above code, a translucent black mask layer is added using the :after pseudo element, and the mask is controlled through the opacity attribute The transparency of the overlay. When the mouse is hovering, set the transparency of the mask layer to 1 through the :hover pseudo-class selector. In addition, in order to achieve special effects of the image, the grayscale() filter is used to grayscale the image, and the filter attribute and transition effect are used to cancel the effect when the mouse is hovered.

Summary:

Using CSS to achieve image masking effects is a simple and effective way, which can add some special effects to web design. This article introduces the method of using pseudo elements, blending modes, and filter characteristics to achieve image masking effects, and provides corresponding code examples. Readers can select and adjust according to specific needs to design unique web page effects.

The above is the detailed content of Tips and methods to use CSS to achieve image masking effects. For more information, please follow other related articles on the PHP Chinese website!