How to achieve image transparency/opaque effect in CSS

CSS image transparency and opacity is one of the commonly used techniques in web development. By processing images with transparency, you can make your website more beautiful and professional, and enhance the visual effects and user experience of your website. In this article, we will introduce in detail how to achieve the transparent and opaque effect of images in CSS.

1. Introduction to CSS image transparency

Transparency is a property in CSS3 that can set the transparency of elements and their backgrounds to show or hide elements or backgrounds. Element transparency can be set via the opacity property, and it's worth noting that this can be applied to all elements, not just images.

The value of the transparency attribute is a number between 0 (fully transparent) and 1 (fully opaque). For example, if you set the image's transparency to 0.5, the image will have 50% transparency.

2. CSS to achieve image transparency effect

1. Transparency

The most common method is to use the transparency attribute. We can use the opacity attribute in CSS as follows:

img{
    opacity:0.5; 
}

Where 0 means completely transparent and 1 means completely opaque. We can also express transparency using percentages. For example, 0.5 means 50% transparency.

This method works for all backgrounds and content, and can affect the opacity of the background by increasing the transparency of background-color.

2. Apply pseudo elements

In the following example, we use pseudo elements to achieve image transparency. First we use the position:relative attribute to position the parent element relatively, and then use position:absolute to position the pseudo-element absolutely to the top of the parent element. We add the background-color and opacity attributes to the pseudo-element to make the image appear semi-transparent.

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: 0.5;
        z-index: 1;
    }
    .parent img {
        position: relative;
        z-index: 2;
    }
</style>

<div>
    <img  src="/static/imghwm/default1.png" data-src="https://picsum.photos/200" class="lazy" alt="How to achieve image transparency/opaque effect in CSS" >
</div>

3. Blending Mode

A blending mode is a CSS property that creates a visual effect between two or more layers. Use the mix-blend-mode property to create visual effects by mixing the colors of two or more layers together. There are many types of blending modes, such as "multiply", "screen", "overlay", "hard-light", etc.

For example, mix the foreground image into the background image:

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent img {
        mix-blend-mode: multiply;
    }
</style>

<div>
    <img  src="/static/imghwm/default1.png" data-src="background.jpg" class="lazy" alt="How to achieve image transparency/opaque effect in CSS" >
    <img  src="/static/imghwm/default1.png" data-src="foreground.png" class="lazy" alt="How to achieve image transparency/opaque effect in CSS" >
</div>

4. Transparency and pseudo-classes

Finally, we can achieve some great effects through pseudo-classes and transparency attributes Beautiful effect. In the example below, we set the transparency to 0.8 and then add the hover pseudo-class to change the transparency value. This will make the image clearer when the mouse is moved over it, and become semi-transparent when the mouse is moved away.

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent img {
        opacity: 0.8;
        transition: opacity 0.3s ease-in-out;
    }
    .parent:hover img {
        opacity: 1;
    }
</style>

<div>
    <img  src="/static/imghwm/default1.png" data-src="https://picsum.photos/200" class="lazy" alt="How to achieve image transparency/opaque effect in CSS" >
</div>

3. Summary

The above are several ways to achieve the transparent and opaque effects of CSS images. These techniques can be used to beautify website visuals, enhance user experience, and give web pages a more professional look and feel. If you are proficient in them, you will be able to provide more flexible and efficient solutions for your web development work.

The above is the detailed content of How to achieve image transparency/opaque effect in CSS. For more information, please follow other related articles on the PHP Chinese website!