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

Question

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

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

我做了一些研究，但我找不到任何东西。我试图让我的所有元素都脱离 <section> 标签，但后来我被迫再次更改元素的位置。感谢您的宝贵时间:)

Answer 1

尝试将图像分开。

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

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

Answer 2

您也可以通过伪元素来实现。像这样：

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

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

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

How to change only the background image opacity?

html

css

background-image

opacity