使用CSS使背景URL图像变暗

Question

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

我尝试过下面的风格，但没有类似的风格

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

Answer 1

您无法在背景图像上使用filter属性。

你可以做的是覆盖第二个＆＃34;图像＆＃34;透明度很低。渐变被视为背景图像，因此我们可以利用多个背景图像来实现此效果。

＆＃13;

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用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;
}