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

Posted 2023-03-06

【中文标题】如何给图像添加黑暗？ [复制]

【英文标题】：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，找到标题：“透明框内的文字”你就能明白了..

【参考方案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