如何使用css为背景图像设置不透明度？

Question

我需要为背景图像设置不透明度，并需要在图像中显示纯文本。我已经经历了几种方法，但我没有找到满足我要求的任何解决方案。你能为我建议一个最好的方法吗？最后我想要的就是像这样的div。

我已经经历了很多解决方案，但是大多数都设置了div内容的不透明度以及背景。但我需要在div中有一个可靠的内容，如图所示。

Answer 1

使用线性然后背景图片网址，类似这样

element {
  background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.8)) repeat scroll 0 0, rgba(0, 0, 0, 0) url("yourImageURL.jpg") repeat scroll center center;
}

Answer 2

类img将是这样的：

img {
    opacity: 0.5;
    filter: alpha(opacity=50);
}

Answer 3

您可以使用具有背景的单独div来覆盖文本吗？在这种情况下，您可以设置背景div的不透明度而不影响文本：

opacity: 0.5;

Answer 4

如果要插入<img标记并将其用作背景，则可以执行以下操作：

HTML：

<div class="intro">
  <h1>Welcome</h1>
  <img src="link/to/yourimage.jpg">
  <div class="overlay"></div>
</div>

CSS：

.intro{
  text-align: center;
  position: relative;
 }
.overlay{
  position: absolute;
  opacity: 0.3;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #fff;
  z-index: 1;
}
.intro h1{
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0,50%);
}

小提琴：https://jsfiddle.net/7hp3vx6c/

Answer 5

您可以这样做：

.background__picture{
    position:relative;
}
.text_&_opacity {
    position: absolute;
    width:;
    height:;
    top:;
    left:;
    background-color: rgba(249, 251, 246, .1);
}

/*if the element is last, you can try:*/

.class_of_element_after_the_picture {
    position:absolute;
    margin-top: - (here comes the picture height)px;
    background-color: rgba(249, 251, 246, .1);
}