如何仅更改背景图像的不透明度？

Question

我正在尝试更改背景图像的不透明度以使其与网站匹配。问题是opacity: 0.5;改变元素内的一切。因此，不仅背景图像会发生变化，该部分中的文本和所有其他元素也会发生变化。我应该如何只更改图像的颜色？这是我的代码：

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

我做了一些研究，但我找不到任何东西。我试图将所有元素从<section>标签中取出，但随后我被迫再次更改元素的位置。谢谢你的时间 ：）

Answer 1

你也可以通过一个伪元素来做到这一点。像这样的东西：

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);
}

因此，您不需要图像标签，而是将设计与内容分开。