变暗CSS背景图片？ [英] Darken CSS background image?

问题描述

应该是一个相当简单的问题。在我的网站我这样做：

 ＃landing-wrapper {
 display：table; 
 width：100％; 
 background：url（'landingpagepic.jpg'）; 
 background-position：center top; 
 height：350px; 
} 
  

我想做的是使背景图片变暗。因为我有UI元素在这个DIV，我不认为我可以真正放置另一个div，使其变暗。建议？

解决方案

您可以使用 CSS3 Linear Gradient 属性以及您的背景图像如下：

 ＃landing- wrapper {
 display：table; 
 width：100％; 
 background：linear-gradient（rgba（0，0，0，0.5），rgba（0，0，0，0.5）），url（'landingpagepic.jpg'）; 
 background-position：center top; 
 height：350px; 
} 
  

这是一个演示：

＃landing-wrapper {display：table; width：100％;背景：线性梯度（rgba（0,0,0,0.5），rgba（0,0,0,0.5）），url（'http://placehold.it/350x150'）; background-position：中心顶部; height：350px; color：white;}

 < div id =landing -wrapper> Lorem ipsum dolor ismet。< / div>  

Should be a fairly simple question. In my website I do this:

#landing-wrapper {
    display:table;
    width:100%;
    background:url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

What I'd like to do is make the background image darker. Since I have UI elements inside this DIV I don't think I can really place another div over it to darken it. Suggestions?

解决方案

You can use the CSS3 Linear Gradient property along with your background-image like this:

#landing-wrapper {
    display:table;
    width:100%;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

Here's a demo:

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');
  background-position: center top;
  height: 350px;
  color: white;
}

<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>

这篇关于变暗CSS背景图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！