How to change only the background image opacity? [duplicate]

问题

This question already has answers here:

How do I give text or an image a transparent background using CSS? (28 answers)

Can I set an opacity only to the background image of a div? (8 answers)

Set opacity of background image without affecting child elements (14 answers)

Closed last year.

I am trying to change the opacity of my background image to make it match the website. The problem is that the opacity: 0.5; change everything within the element. So not only the background image change but also the text and every other element in the section. How am i supposed to change only the color of the image? Here is my code:

section {
   background-image: url(../IMG/Photo_NR1.jpg);
   padding: 15px;
   width: 100%;
   height: 700px;
}

I have done some research but i couldn't find anything. I tried to have all my elements out of the <section> tag but then i was forced to change the position of the elements again. Thanks for your time :)

回答1:

You could also do this by a pseudo element. Something like this:

section {
   position: relative;
   padding: 15px;
   width: 100%;
   height: 700px;
}

section::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .5; 
  background-image: url(../IMG/Photo_NR1.jpg);
}

So you do not need an image tag and you separating the design from content.

回答2:

Try to seperate the image.

Html:

<div class="my-container">
    <img src="your/image">
</div>

Css:

.my-container {
    position: relative;
    overflow: hidden;
}
.my-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.5;
}

Source: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

来源：https://stackoverflow.com/questions/49560988/how-to-change-only-the-background-image-opacity