How to use the opacity attribute in css to add transparency to a background image (code)

The content of this article is about how to use the opacity attribute to add transparency (code) to background images in css. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

You cannot directly add the opacity attribute to the background image in CSS. You can use the following method to bypass this limitation:

div {
  width: 200px;  
  height: 200px;  
  display: block;  
  position: relative;
  }
div::after {
  content: "";  
  background: url(image.jpg);  
  opacity: 0.5;  
  top: 0;  
  left: 0;  
  bottom: 0;  
  right: 0;  
  position: absolute;  
  z-index: -1;   
}

Related recommendations:

CSS transparent opacity and The most accurate usage of the transparency filter filter in each version of IE

Introduction to the usage of using the opacity attribute of CSS3 to set the transparent effect

The above is the detailed content of How to use the opacity attribute in css to add transparency to a background image (code). For more information, please follow other related articles on the PHP Chinese website!