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

新手上路,请多包涵

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

我正在使用 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);
}

原文由 user7804189 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 255
2 个回答

您必须将 .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>

原文由 WizardCoder 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题