使 CSS 背景图像变暗？ [复制]

Posted 2023-03-06

【中文标题】使 CSS 背景图像变暗？ [复制]

【英文标题】：Darken CSS background image? [duplicate]

【发布时间】：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 来使其变暗。建议？

【参考方案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');

谢谢！！！有没有办法旋转图像？