如何在 CSS 中设置背景图像不透明度而不使用伪之前/之后和/或定位的 div

Question

我有一个由 CMS 生成的 div，其中包含一个背景图像，我想更改该背景图像的不透明度，而不影响该 div 子元素的不透明度。https://jsfiddle.net/L5b81yqo/超文本标记语言<div class="container">    <p>Some dummy text</p></div>CSS.container {  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);  width: 100%;  height: 500px;  background-size: cover;}是否可以使用CSS更改背景图像的不透明度，而无需在之前/之后使用psuedo（因为这涉及使用背景URL，我无法在样式表中使用它，因为它是来自CMS的动态并且可以是任何URL）或添加附加标记（因为 CMS 不允许我添加更多标记）。我查看了各种解决方案，但所有这些似乎都使用了我无法使用上面定义的方法，例如https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity如果不可能，那也没关系，我可以寻找解决方法。

Answer 1

在之前/之后不使用 psuedo （因为这涉及使用后台 URL，我无法在样式表中使用它，因为它是来自 CMS 的动态并且可以是任何 URL

您仍然可以使用伪元素并继承背景，而不需要 url：

.container {

  /* I will not touch this */

  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg); 

  /**/

  height: 400px;

  background-size: 0 0; /* make the main background hidden */

  position:relative;

  z-index:0;

}

.container::before {

  content:"";

  position:absolute;

  top:0;

  left:0;

  right:0;

  bottom:0;

  z-index:-1;

  background-image:inherit;

  background-size:cover;

  opacity:0.3;

}

<div class="container">

    <p>Some dummy text</p>

</div>

或者如下所示，在顶部有一个简单的背景颜色层：

.container {

  /* I will not touch this */

  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg); 

  /**/

  background-size:cover;

  height: 400px;

  position:relative;

  z-index:0;

}

.container::before {

  content:"";

  position:absolute;

  top:0;

  left:0;

  right:0;

  bottom:0;

  z-index:-1;

  background:rgba(255,255,255,0.7);

}

<div class="container">

    <p>Some dummy text</p>

</div>

Answer 2

.container {

  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);

  width: 100%;

  height: 500px;

  background-size: cover;

  background-color: rgba(255, 255, 255, 0.5);

  background-blend-mode: color;

}

<div class="container">

    <p>Some dummy text</p>

</div>

您可以使用 Banckground-color: rgba(rbg 中的颜色，不透明度) 然后使用 background-blend-mode: color; 来完成此操作 就是这个

Answer 3

您可以使用以下方法实现此目的background-blend-mode

background-blend-mode可以使用background-color，没有background-color则不行

.container {

  background: url(https://live.staticflickr.com/4561/38054606355_26429c884f_b.jpg);

  width: 100%;

  height: 500px;

  background-size: cover;

  background-color: rgba(238, 238, 238, 0.81);

  background-blend-mode: color;

}

<div class="container">

  <p>Some dummy text</p>

</div>

注意：这不会完全像不透明度一样工作，但它与不透明度类似