【问题标题】:Darken CSS background image? [duplicate]使 CSS 背景图像变暗? [复制]
【发布时间】:2014-12-24 15:15:24
【问题描述】:

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

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

我想做的是使背景图像变暗。因为我在这个 DIV 中有 UI 元素,所以我认为我不能真正在它上面放置另一个 div 来使其变暗。建议?

【问题讨论】:

    标签: html css


    【解决方案1】:

    您可以将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%;
      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>

    【讨论】:

    • 这在 IE9 中不起作用。有什么办法吗?
    • @BrechtMachiels 我认为 IE 的最佳解决方法是使用透明图像
    • @john1717 让我们成为现实...... IE 的最佳解决方法可能是不使用 IE
    • 如果你在不同的地方设置其他背景属性,它仍然可以在background-image下工作,即background-size/background-repeatbackground-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');
    • 谢谢!!!有没有办法旋转图像?
    猜你喜欢
    • 2017-03-07
    • 2019-06-11
    • 2017-11-10
    • 2016-07-23
    • 2015-10-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多