如何在不透明度的图像顶部添加黑色层答案

【问题标题】：How can i add a black layer over top of image with opacity如何在不透明度的图像顶部添加黑色层
【发布时间】：2017-11-22 21:55:21
【问题描述】：

我想知道是否有一种方法可以在我的图像上添加一个黑色层，但让它稍微透明，这样你仍然可以看到图像。

我正在使用 Bootstrap 4，下面是我正在使用的代码，包括 CSS :)

任何帮助将不胜感激。谢谢

<div class="row">
  <div class="col-md-6">    
    <div class="card-overlay" style="background-image: url('img/dirt1.jpg')">
      <div class="white-text text-center">
        <div class="card-block">
          <h3>Project title</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat 
 fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus 
 minus error nisi architecto nulla ipsum dignissimos. Odit
            sed qui, dolorum!.
          </p>
          <a class="btn btn-primary" href="...">Read More</a>
        </div>
      </div>
    </div> 
  </div>
</div>

CSS：

.card-overlay {
  background: rgba(0, 0, 0, 0.5);
}

【问题讨论】：

标签： html css twitter-bootstrap opacity

【解决方案1】：

您必须将.car-overlay div 放在具有背景的 div 中。这是因为如果一个元素有背景图片和背景颜色，那么背景颜色会出现在背景图片的后面。

.card-overlay {
  background: rgba(0, 0, 0, 0.5);
}

<div class="row">
  <div class="col-md-6">
    <div style="background-image: url('https://www.placecage.com/c/460/300');background-size:cover;">
      <div class="card-overlay">
        <div class="white-text text-center">
          <div class="card-block">
              <h3>Project title</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit
                  sed qui, dolorum!.</p>
               <a class="btn btn-primary" href="...">Read More</a>
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

如果您不想更改 HTML 结构，您可以使用带有渐变而不是背景颜色的 CSS3 多重背景，因为您不能对背景颜色进行分层。

.card-overlay {
  background:
  linear-gradient(
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.5)
  ),
  url('https://www.placecage.com/c/460/300');
}

<div class="row">
  <div class="col-md-6">
    <div class="card-overlay">
        <div class="white-text text-center">
          <div class="card-block">
              <h3>Project title</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat
       fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus
       minus error nisi architecto nulla ipsum dignissimos. Odit
                  sed qui, dolorum!.</p>
               <a class="btn btn-primary" href="...">Read More</a>
         </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

您先生是一个沉默的守护者，一个警惕的保护者。黑暗骑士
@user7804189 我添加了另一个您可能感兴趣的解决方案，使用 CSS3 多背景。
无论如何我可以让图像填满方框，以便您可以看到所有内容。目前它只显示了一小部分。我试过 class="img-fluid" 但这没什么区别。谢谢
我不太清楚你的意思，但你可以在带有背景图像的元素上尝试background-size:cover;。 .img-fluid 仅适用于 img 元素。
所以图片只显示了左上角的一小部分。我已经截图给你看:) dropbox.com/s/a7tit3zk2g0xef1/…

【解决方案2】：

CSS

.container { background-color: #000000;}
.container img { opacity: 0.2; }

HTML

<div class="container">
<img src="#">
</div>

Working Fiddle Example Here...

【讨论】：

【解决方案3】：

您可以为此使用after/before

.card-overlay{
  position: relative;
}
.card-overlay:after {
  content:'';
  position:absolute;
  left:0px;
  top:0px;
  width:100%;
  height:100%;
  background: rgba(0, 0, 0, 0.5);
}

【讨论】：

【解决方案4】：

试试这个：

.card-overlay {position:relative;}
.card-overlay:before{    background: rgba(37, 35, 35, 0.07);    position: absolute;    height: 100%;    left: 0;    top: 0;    margin: 0;    width: 100%;    content: ' ';    display: block;}

【讨论】：