Question

我只想改变背景图像的不透明度。不是像p的整个项目。的CSS：

#home{
background-image: url('../img/main.jpg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
position: relative;
height:100%;
opacity: .8;
}

HTML：

<section id="home">
   <p>hi</p>
   <p>hi</p>
   <p>hi</p>
   <p>hi</p>
   <p>hi</p>
 </section>

Answer 1

规则opacity用于元素。不适用于background。如果您需要这样做，您有两种选择：

使用其他div伪造背景并在其上使用opacity。
使用两个不同的图像，其中一个图像的opacity较小。

有很多黑客可用：

CSS Opacity on Child Element
使用:after并设置样式。

Answer 2

虽然没有任何方法可以直接改变背景不透明度，但是有一种黑客的方法。

div {
  width: 200px;
  height: 200px;
  display: block;
  position: relative;
}

div::after {
  content: "";
  background: url(image.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

taken from here

Answer 3

我认为CSS背景透明度没有任何属性。

您可以做的是创建一个填充空间的子元素，并将背景和透明度应用于该元素。

如果您想要纯CSS解决方案，可以使用带有空内容字段的：before伪选择器创建子元素。

Answer 4

如果您只想更改背景图像的不透明度，可能更容易以较低的不透明度实际保存图像，以避免编写额外的标记。

然而，有一些讨厌的工作涉及使用绝对定位将“子”元素移到背景的顶部 - 这是一篇非常有用的文章here。

如何只更改一个类中的一个项目

4 个答案: