背景图像的不透明度

Posted 2023-03-06

【中文标题】背景图像的不透明度

【英文标题】：Opacity on background image

【发布时间】：2016-09-06 21:18:58

【问题描述】：

据我所知，我无法直接更改，但使用 ::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;

另一方面，我不知道我可以简单地使图像本身透明，但我觉得从长远来看，我觉得这是一个更有用的代码。提前致谢。

【问题讨论】：

你的 dom 中没有 .backimg 类的元素

【参考方案1】：

您的 html 中缺少 .backimg 类。

不要使用双 :: 并在后面添加内容和显示属性。还有一些尺寸不会小时（宽度，高度）

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

【参考方案2】：

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