背景图像的不透明度

Question

据我所知，我无法直接更改背景图像的不透明度，但使用 ::before 和 ::after 似乎无法让我的图像显示出来。我做错了吗？ HTML

花window盒

我们所有的产品几乎都有 16 英尺以内的任何长度和两种尺寸。我们的标准尺寸盒子设计用于容纳几乎所有的花。我们的 XL 号尺寸更高更深，可为植物提供更多根部 space，使其成为理想尺寸的 window 植物箱。

    </div>
    <div class="card-back">
        <h2 class="click-here"><b>Visit Site</b></h2>
        <div class="info">
        <h2 class="info">Email:</h2>
        <h2 class="info">Phone:</h2>
        </div>
    </div>

    <!-- Content -->
    <div class="all-content">
        <h1>Contrary to popular belief</h1>
    </div>
</li>

当前 CSS

 .content li:nth-child(1) .card-back{
            background-image:url(../images/sponsor-imgs/Cellular%20PVC%20Columns-Kingston-1.jpg);
       width: 100%;}

我试过的

.backimg::after {
    background-image:url(../images/backimg/wide.png);
      opacity: 0.5;
}
.backimg::before{
        background-image:url(../images/backimg/wide.png);
          opacity: 0.5;
    }
div::after {

  opacity: 0.5;
}

另一方面，我不知道我可以简单地使图像本身透明，但我觉得在较长的运行中，这样做的代码更有用。提前致谢。

Answer 1

::before 和 ::after 需要 content 属性。您可以将其设置为空字符串，但必须包含它。

在大多数情况下，您还需要定义 display 属性并为元素分配一些尺寸（除非您使用 position: absolute; top: 0; bottom: 0; left: 0; right: 0; 之类的东西 - 在这种情况下，您不需要't).

.backimg {
  background: red;
}

.backimg::after {
  content: "";
  display: block;
  width: 200px;
  height: 200px;
  background-image: url(http://placehold.it/200x200);
  opacity: 0.5;
}

<div class="backimg"></div>

Answer 2

您缺少 html 中的 .backimg class。

不要使用double :: 并在之后添加内容和显示属性。还有一些尺寸不会限制 (width,height)

.class:after{
    Cintent:"";
    Display:block; // change as you see fit

}

背景图像的不透明度

Opacity on background image

html

css

background-image

opacity

花window盒