How to set the transparency of the background image in css

How to set the transparency of the background image in css: You can use the opacity attribute to set it, such as [opacity: value|inherit;]. value specifies the opacity, and inherit specifies the value of the opacity attribute inherited from the parent element.

Attribute introduction:

The opacity attribute sets the opacity level of the element.

(Learning video sharing: css video tutorial)

Grammar:

opacity: value|inherit;

Attribute value:

value Regulations Opacity. From 0.0 (fully transparent) to 1.0 (fully opaque).

inherit The value of the opacity attribute should be inherited from the parent element.

Example:

Tip: The opacity attribute cannot be directly added to the background image in CSS. You can use the following method to bypass this restriction.

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 tutorial

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