Question

有没有办法让.png图像变暗？我有一个作为背景图像，但它不覆盖整个容器，如果我设置叠加以使其变暗。

.overlay {
    background-color: #322D36 ;
     bottom: 0;
     left: 0;
     opacity: 0.5;
     position: absolute;
     right: 0;
     top: 0;
     z-index: 1;
}

它在图像空间之外也是可见的。有没有办法如何只使图像变暗？

demo

Answer 1

你可以使用（不是超级支持的）filter属性。

filter: brightness(0.4);

可能需要一些前缀，例如-webkit-。

这是fiddle。

编辑因为评论：

使容器具有图像的宽度和高度，然后使用before伪类添加图像。

.container {
  position: relative;
  width: ###;
  height: ###;
}

.container:before {
  content: '';
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: block;
  position: absolute;
  z-index: 1;
  background-image: some-url;
  -webkit-filter: brightness(0.4);
}

.content {
  position: relative;
  z-index: 10;
}

将所有文字放在.content div。

中

Answer 2

您可以在背景中使用linear-gradient。

background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7) ), url("https://lh4.googleusercontent.com/-kDFp715GK_iC4AwrDWQpCR0HfxDMp0WYZATcnlXDhXgf-05OTv3Z9E-P1bL2imdAFAtWg=w1876-h815");

Updated JSFiddle

这里有另一个JSFiddle，你可以看到只有背景会变暗，其余的元素都会正常。

Answer 3

您可以在background-image属性后使用背景色，并使用 background-blend-mode 属性覆盖background-image。这是示例

https://codepen.io/anon/pen/PQOejG?editors=1100

在背景中使图像变暗

3 个答案: