You want to change the background opacity of an element. For example, you may want to decrease the opacity of a background image to make any text on the image more readable. The opacity
CSS property sets the opacity of an element. If you decrease the opacity of the background of an element, the opacity of the child elements will be decreased as well. How do you decrease the opacity of the background without affecting the opacity of child elements?
The opacity
of a parent element is not inherited by child elements. Setting the opacity
of an element’s background to a value below 1 adds the element to a new stacking context. The opacity
of the parent’s background sets the maximum perceived opacity
of the child elements. The child elements will have an opacity
relative to the parents’ background opacity
.
Here are three solutions that prevent the child element from having its opacity
reduced when the opacity
of the parent element is reduced. The first solution is for parent elements with a background color, the second and third are for parent elements that have an image as a background.
Set the background-color
property with a color value
that has an alpha channel that allows you to change the transparency of the color.
.parent { background-color: rgba(0, 0, 0, 0.1); }
You can also set the background
property, which is a shorthand that allows you to set all of the background CSS properties at once.
You can use a ::before
or ::after
CSS pseudo-element that’s absolutely positioned relative to the parent element. You can add a background image to the pseudo-element and change its opacity
:
.parent { position: relative; } .parent::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.1; background: url(https://source.unsplash.com/random); z-index: -1; }
The ::before
pseudo-element is positioned relative to the parent element. We make it take up the full space of the parent element. We set the z-index
of the ::before
pseudo-element to -1 so that the background image is positioned behind any of the parent’s content. You can change the positioning and styling of the background image using background
properties such as background-position
and background-size
.
If you want to use an image from an <img>
element as the background image, you can also make use of absolute positioning to make the image cover the background of the parent and set its opacity
without affecting the child elements’ opacity:
<div class="parent"> <img class="img-bg" src="https://source.unsplash.com/random" alt="Random image"> <div> text </div> </div>
Set the width and height of the image to 100% so that it covers the parent:
.parent { position: relative; width: 350px; height: 100px; } .img-bg { opacity: 0.1; position: absolute; width: 100%; height: 100%; object-fit: cover; }
The object-fit
property allows you to determine how the image should be resized to fit its container, the parent element.