背景图片上的不透明度

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; left: 0; right: 0;之类的内容 - 在这种情况下，您不需要）。

＆＃13;

＆＃13;

.backimg {
  background: red;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您在html中缺少.backimg类。

不要使用double ::并在之后添加内容和显示属性。一些尺寸也不会（宽度，高度）

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

}