如何使 CSS 背景图像变暗？答案

【问题标题】：How to darken a CSS background image?如何使 CSS 背景图像变暗？
【发布时间】：2015-10-16 10:02:25
【问题描述】：

我正在为此拉头发。我已经尝试了我发现的所有东西，此时我猜我一定是在犯某种错误。我正在尝试使背景图像变暗，使其不那么饱和。

这是我的 HTML：

<body id="home">
    <header>
        <nav>
            <ul class="pull-left">
                <li><a href="#">Bearbeard Logo</a></li>
                <li><a href="#">World</a></li>
            </ul>
            <ul class="pull-right">
                <li><a href="#">Eretikas</a></li>
                <li><a href="#">Custom</a></li>
            </ul>
            <div id="slogan">THE HERETIC SWORD</div>
        </nav>
    </header>
</body>

还有我的 CSS：

#home {
  background-image: url(file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg);
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}
nav li {
  display: inline;
  position: relative;
  float: left;
}
nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}
#slogan {
  color: #FFFAF0;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 18px;
  opacity: 0.5;
  text-align: center;
  font-weight: bold;
}

这给了我一个完全覆盖页面的背景。但我想让它变暗（不悬停或点击）。我尝试过的一切都没有实现任何变暗（我尝试过假渐变、reba 的东西等），并且以某种方式妨碍了<div id="slogan"> 和<nav>，将它们推到了所有地方。

我的格式完全不正确吗？

【问题讨论】：

为什么不把图片hellcity.jpg修改成更暗呢？
我正在尝试学习如何通过 CSS 来做到这一点，这样我以后就不必编辑照片（而不是只使用它们来时使用它们并使用我实用工具带中的工具为我做）。
这里有一个answer，关于如何降低亮度，有帮助吗？我建议使用filter: brightness 答案。
@SpencerWieczorek -- 我实际上已经尝试过了，但奇怪的是它什么也没做，这也是我如此困惑的部分原因。
您正在使用/支持哪些浏览器？也许你使用的浏览器根本不支持“过滤器”。

标签： html css

【解决方案1】：

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
  -moz-background-size:  cover;
  -o-background-size: cover;
  background-size: cover;
}

This should work

【讨论】：

所以，我不知道为什么......但它做到了。我以前试过这个，用 rgba 部分写在自己的行上（或者我可能只有一个 rgba 而不是两个？）。编辑：所以，我不知道如何向您展示我以前在做什么，以确定为什么它现在可以工作，而以前它没有工作。 :'/ 不管怎样，你能解释一下为什么当所有其他显示的方法（以及这个 SAME 问题的其他答案）只会使的内容变暗时，这会使整个背景变暗吗？
我认为您的标签格式不正确，并且 before 和 hover:body 元素渗入了导航的标记。如果您不返回几步并将源粘贴到此处进行确认，我无法知道。
只是为了确保我理解你，你是在暗示我可能没有正确关闭或打开 () 或 {}，导致这部分指令吃掉了后面的指令？这很可能是完全正确的。
嗯...更像标签，但是是的 - 像“”这样的东西会破坏它并导致您的导航栏也变黑
开始的乐趣。好吧，再次感谢您，我非常感谢您的意见。

【解决方案2】：

可以在body标签上设置背景，用rgba()+alpha添加伪内容的暗层，然后将所有内容包裹成div并设置为position:relative，即可让它保持在顶部。

html, body {
    height: 100%;
    margin: 0;
}
body {
    background: url("http://lorempixel.com/400/200") center center no-repeat;
    background-size: cover;
    position: relative;
}
body:before {
    content: "";
    display: block;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    transition: background .5s;
}
body:hover:before {
    /*for demo, move this line up if you want to darken it as default*/
    background: rgba(0,0,0, .5);
}
div {
    position: relative;
    color: white;
}

&lt;div&gt;Hello world!&lt;/div&gt;

【讨论】：

【解决方案3】：

.tile:hover{
    background-color: rgb(211, 211, 211);
    background-blend-mode: multiply;
}

这对我来说只能调整 div 上的背景图像。

可以调整背景颜色以使图像更亮或更暗。

【讨论】：

发现这对于无法修改 HTML 的情况很有用。

【解决方案4】：

然后创建一个适合 100% #home 的容器 div：

#container {
background: rgba(0, 0, 0, 0.5);
}

0.5 = 50% 不透明度...

它会有使背景图片变暗的效果

【讨论】：

这是我尝试过的方法之一。最终发生的是它使 nav/ul 元素而不是背景变暗。
如果你在正文之后添加容器，在你做标题之前，它不可能使它们变暗，除非你使用像 z-index 这样的东西
@theblackveil - 您可以继续将您已经尝试过的所有方法添加到您的问题中吗？

【解决方案5】：

第一笔生意：您不需要在 body 元素上使用 id 或 class

第二个看下面的代码。

body {
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url(http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg);
}

nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

nav li {
  display: inline;
  position: relative;
  float: left;
}

#slogan {
  color: #FFFAF0;
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  font-size: 18px;
  opacity: 0.5;
  text-align: center;
  font-weight: bold;
}

<body>
    <nav>
        <ul class="pull-left">
            <li><a href="#">Bearbeard Logo</a></li>
            <li><a href="#">World</a></li>
        </ul>

        <ul class="pull-right">
            <li><a href="#">Eretikas</a><li>
            <li><a href="#">Custom</a><li>
        </ul>

        <div id="slogan">THE HERETIC SWORD</div>
     </nav>
   </body>

原始图片感谢谷歌:)

【讨论】：

谢谢。我完全理解你的第一点，这是我为了尝试新事物而做的事情。 - -;谢谢，不过，我对此并不积极。第二点，我不确定我是否遵循？什么不应该在体内？我只是在努力确保我做正确的事情。
谢谢。你介意扩展为什么
不应该在正文中吗？我有一个不在体内的部分。
段来自“Beautiful HTML”的 png，我的想法是它旨在将导航内容与页面的其余部分分开。感谢您的反馈。
对不起，
是 html5 并且允许在正文中使用，我确实将它与 <head></head> 混淆了

【解决方案6】：

使用过滤器属性

随便用，

filter: brightness(50%);

为图像降低亮度。

【讨论】：

【解决方案7】：

您可以添加相对于您的#home 的位置，然后将以下内容添加到您的 CSS：

#home::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

（0.5 可能会根据您想要成像的暗度而变化。）

然后做一个 z-index 将其他内容带到覆盖层之上：

#home * {
  z-index: 10; 
}

【讨论】：

【解决方案8】：

你可以这样做：

#home {
   background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('file:///Volumes/Animus/Jon/Dropbox/website/hellcity.jpg');
  -webkit-background-size: cover;
    -moz-background-size:  cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

【讨论】：

这个答案可以从解释中受益。
好吧，但这是真的，不是吗？
很难说没有解释。你“可以”用 CSS 做任何事情，但它会做你想要的或OP要求的吗？

【解决方案9】：

您可以使用background-blend-mode 属性并将其设置为变暗。它看起来像这样

background-blend-mode:darken;

【讨论】：