html - 背景图像的不透明度

Question

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

花窗框

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

    </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; 的东西)左:0；右:0； - 在这种情况下，您不需要)。

.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>