使用 CSS 使背景 URL 图像变暗

Question

我希望将 header 上的背景 url 图像变暗。有谁知道我可以用什么来获得右图中显示的暗效果？或者这只能使用 Photoshop 技术创建？

我试过下面的样式，但都不喜欢

-webkit-filter: grayscale(1); */
filter: grayscale(1);
opacity: 0.5;

Answer 1

你可以添加一些dive，z-index:2，然后设置背景色为黑色，不透明度为0.5，然后设置相对位置，设置div为和img在同一个地方，大小一样。

通过这种方式，您将有一些div，可以覆盖原始照片。

例如：

.cover-photo{
background-color:black;
opacity:0.5;
position:absolute or relative - You have to find the best way
top:0;
height: the same as img;
width: the same as img;
}

Answer 2

您不能在背景图像上使用filter属性。

您可以做的是用深色透明度覆盖第二个 "image"。渐变被视为背景图像，因此我们可以利用使用多个 背景图像 的能力来实现此效果。

body {
  background-image: 
    linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)),   
    url(http://www.fillmurray.com/1460/1300);
    background-size: cover;
}

使用 CSS 使背景 URL 图像变暗

Darkening a Background URL image with CSS

css

photoshop

background-image