使CSS背景图片变暗？

一尘不染

使CSS背景图片变暗？

css

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

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

我想做的是使背景图像变暗。由于我在该DIV中包含UI元素，因此我认为我真的不能在其上放置另一个div来使其变暗。有什么建议吗？

阅读 2373

2020-05-16

共1个答案

一尘不染

您可以将CSS3 LinearGradient属性与背景图像一起使用，如下所示：

#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%;

  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>

2020-05-16