How to set transparency to background-image?

As the title states, there is no way to change the transparency of the image itself. The image is written in css with background-image. Is there any way to set the transparency for it?

div{
    position: relative;        
}
div:after{
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(...);
    opacity: 0.5;
}

Use png as the background image with transparency.

The element sets transparency as the background, and another element covers it and makes a guest appearance on it, pretending to be the content of this element.

The opacity attribute of css can set the transparent attribute of the image.

#div{
    background-image: url(img.png);
    opacity:0.4;
    filter:alpha(opacity=40);/* 针对 IE8 以及更早的版本 */ }

cannot change the transparency of the image itself. It can only change the transparency of the entire DIV to achieve a similar visual effect:
1 .opacity attribute
2. If compatibility allows, use the css3 filter-webkit-filter (different from the previous IE filter).

Look at the implementation method of this website

Opacity in CSS background images

The above is the detailed content of How to set transparency to background-image?. For more information, please follow other related articles on the PHP Chinese website!