Html 如何使 CSS 背景图像变暗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31632419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to darken a CSS background image?
提问by theblackveil
I am pulling my hair out over this. I have tried literally everything I have found and at this point I'm guessing I must just be making some kind of mistake. I am trying to darken the background image so that it is not quite as saturated.
我正在为此拉头发。我已经尝试了所有我发现的东西，在这一点上我猜我一定只是犯了某种错误。我试图使背景图像变暗，使其不那么饱和。
Here is my HTML:
这是我的 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>
And my CSS:
还有我的 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;
}
This gives me a background that completely covers the page. But I want to darken it (without hovering, or clicking). Everything I have tried has NOT achieved any darkening whatsoever (I've tried fake-gradients, rebastuff, etc.), and somehow gets in the way of <div id="slogan">and <nav>, pushing them all over the place.
这给了我一个完全覆盖页面的背景。但我想让它变暗（不悬停或点击）。我尝试过的所有方法都没有实现任何变暗（我尝试过假渐变、reba东西等），并且以某种方式阻碍了<div id="slogan">和<nav>，将它们推到了整个地方。
Is my formatting just totally incorrect?
我的格式完全不正确吗？
回答by Frankenmint
#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;
}
回答by Stickers
You can set the background on bodytag, and add a darken layer with pseudo content with rgba()+ alpha, then wrap all the content into a divand set it to position:relative, to make it stays on top.
您可以在body标签上设置背景，并使用rgba()+添加一个带有伪内容的变暗层alpha，然后将所有内容包装成 adiv并将其设置为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;
}<div>Hello world!</div>回答by Stickers
First order of business:
You do not need id or class on body element
第一件事：您不需要 body 元素上的 id 或 class
and second see the code below.
其次看下面的代码。
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> Original image thanks to google :)
感谢谷歌的原始图片:)
回答by LFX
create a container div that fits 100% of #home then:
创建一个适合 100% #home 的容器 div 然后：
#container {
background: rgba(0, 0, 0, 0.5);
}
the 0.5 = 50% opacity...
0.5 = 50% 不透明度...
it will have the effect of darkening the background image
它将具有使背景图像变暗的效果
