背景图片不透明度

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;
}

顺便说一下，我知道我可以简单地使图像本身透明，但我觉得编写代码在长期来看更加有用。提前致谢。

- Hot Java

---

您的DOM中没有带有类名.backimg的元素。 - user6292372

Answer 1

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

大多数情况下，您还需要定义一个display属性并为元素分配一些尺寸（除非您使用像position：absolute；top：0；bottom：0; left：0; right：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>

- Turnip

Answer 2

你的HTML中缺少.backimg类。

不要使用双冒号，并在之后添加内容和显示属性。此外，一些尺寸不会伤害（宽度、高度）。

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

}

- Matej Žvan