如何给图像添加黑暗？ [复制]答案

【问题标题】：How to put darkness to an image? [duplicate]如何给图像添加黑暗？ [复制]
【发布时间】：2017-05-07 07:44:30
【问题描述】：

我正在创建一个标头组件，其中正确的背景应该是这样的

但现在看起来像这样

这就是我附加该图像的方式

<div class="bg_image"
     style="background-image: url('images/driver_rewards/masthead_desktop.jpg')"></div>

css

.bg_image{
    width: 100%;
    min-height: 503px;
    background-repeat: no-repeat;
    background-size: cover;
}

有什么建议吗？

【问题讨论】：

您不能在图像编辑器中使图像变暗吗？一种选择是在图像上覆盖一个元素，并通过opacity 使其半透明
您可以使用可以应用不透明度的伪元素在背景顶部应用叠加层。
background-image 样式是否需要内联，或者您可以将其移至 CSS .bg_image？
参考CSS opacity，找到标题：“透明框内的文字”你就能明白了..

标签： html css

【解决方案1】：

您可以使用 伪元素 在背景顶部应用叠加层，您可以在其上应用 opacity。

.bg {
  width: 300px;
  height: 200px;
  background: transparent url(//lorempixel.com/300/200) no-repeat 0 0;
  position: relative;
}
.bg > * {
  z-index: 3;
  color: white;
  position: relative;
}
.bg.darken::before {
  display: block;
  content: "";
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-color: black;
  opacity: .5;
}

<div class="bg">
  <h2>Without pseudo element for darkening</h2>
</div>
<div class="bg darken">
  <h2>With pseudo element for darkening</h2>
</div>

【讨论】：

【解决方案2】：

您可以使用filter 并设置亮度：

.bg_image{
    width: 100%;
    min-height: 503px;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: brightness(50%);
    filter: brightness(50%);
}

【讨论】：

我正在使用 scss。 webkit的东西不是必须的吗？
@NietzscheProgrammer 假设你使用自动前缀，不，不是
谢谢兄弟！效果很好。
不客气。 @NietzscheProgrammer