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

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

Answer 2

尝试分离图像。

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

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

2 个答案: