Html 如何使用 CSS 使背景变暗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23208200/
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 background using CSS?
提问by shin
I have an element with text in it. Whenever I decrease the opacity, then I decrease the opacity of the WHOLE body. Is there any way I can just make the background-imagedarker, and not everything else?
我有一个带有文本的元素。每当我降低不透明度时，我就会降低整个身体的不透明度。有什么办法可以让background-image颜色变暗，而不是其他所有东西？
background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
回答by shin
Just add this code to your image css
只需将此代码添加到您的图像 css
body{
background:
/* top, transparent black, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
/* bottom, image */
url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
}Reference: linear-gradient() - CSS | MDN
参考：linear-gradient() - CSS | MDN
UPDATE: Not all browsers support RGBa, so you should have a 'fallback color'. This color will be most likely be solid (fully opaque) ex:background:rgb(96, 96, 96). Refer to this blogfor RGBa browser support.
更新：并非所有浏览器都支持 RGBa，因此您应该有一个“后备颜色”。这种颜色很可能是纯色（完全不透明），例如：background:rgb(96, 96, 96)。请参阅此博客以了解 RGBa 浏览器支持。
回答by Craig O. Curtis
Use an :after psuedo-element:
使用 :after 伪元素：
.overlay {
position: relative;
transition: all 1s;
}
.overlay:after {
content: '\A';
position: absolute;
width: 100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.5);
opacity: 1;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.overlay:hover:after {
opacity: 0;
}
Check out my pen >
看看我的笔 >
回答by Helena Bourmault
Setting background-blend-modeto darkenwould be the most direct and shortest way to achieve the purpose however you must set a background-colorfirst for the blend mode to work.
This is also the best way if you need to manipulate the values in javascript later on.
设置background-blend-mode为darken将是实现目的的最直接和最短的方法，但是您必须首先设置background-color混合模式才能工作。
如果您稍后需要在 javascript 中操作值，这也是最好的方法。
background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;
回答by Helena Bourmault
It might be possible to do this with box-shadow
有可能做到这一点 box-shadow
however, I can't get it to actually apply to an image. Only on solid color backgrounds
但是，我无法将其实际应用于图像。仅在纯色背景上
body {
background: #131418;
color: #999;
text-align: center;
}
.mycooldiv {
width: 400px;
height: 300px;
margin: 2% auto;
border-radius: 100%;
}
.red {
background: red
}
.blue {
background: blue
}
.yellow {
background: yellow
}
.green {
background: green
}
#darken {
box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7);
/*darkness level control - change the alpha value for the color for darken/ligheter effect */
}Red
<div class="mycooldiv red"></div>
Darkened Red
<div class="mycooldiv red" id="darken"></div>
Blue
<div class="mycooldiv blue"></div>
Darkened Blue
<div class="mycooldiv blue" id="darken"></div>
Yellow
<div class="mycooldiv yellow"></div>
Darkened Yellow
<div class="mycooldiv yellow" id="darken"></div>
Green
<div class="mycooldiv green"></div>
Darkened Green
<div class="mycooldiv green" id="darken"></div>回答by Yooz
You can use a container for your background, placed as absolute and negative z-index : http://jsfiddle.net/2YW7g/
您可以使用容器作为背景，放置为绝对和负 z-index ：http: //jsfiddle.net/2YW7g/
HTML
HTML
<div class="main">
<div class="bg">
</div>
Hello World!!!!
</div>
CSS
CSS
.main{
width:400px;
height:400px;
position:relative;
color:red;
background-color:transparent;
font-size:18px;
}
.main .bg{
position:absolute;
width:400px;
height:400px;
background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png");
z-index:-1;
}
.main:hover .bg{
opacity:0.5;
}
回答by Alex Price
Just to add to what's already here, use the following:
只是为了添加到这里已有的内容，请使用以下内容：
background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )");
...for cross-browser support of a 70% linear-gradient overlay. To brighten the image, you can change all those 0,0,0's into 255,255,255's. If 70% is a bit much, go ahead and change the .7. And, for future reference check out this: http://www.colorzilla.com/gradient-editor/
...用于跨浏览器支持 70% 线性渐变叠加。要使图像变亮，您可以将所有0,0,0's更改为255,255,255's。如果 70% 有点多，请继续更改.7. 而且，为了将来参考，请查看：http: //www.colorzilla.com/gradient-editor/
回答by Trung
when you want to brightness or darker of background-color, you can use this css code
当您想要使背景颜色变亮或更暗时，可以使用此 css 代码
.brighter-span {
filter: brightness(150%);
}
.darker-span {
filter: brightness(50%);
}
回答by Daniel Sokolowski
For me the filter/gradient approach didn't work (perhaps due to the existing CSS) so I have used :beforepseudo styling trick instead:
对我来说，过滤器/渐变方法不起作用（可能是由于现有的 CSS），所以我使用了:before伪样式技巧：
.eventBannerContainer {
position: relative;
}
.eventBannerContainer:before {
background-color: black;
height: 100%;
width: 100%;
content: "";
opacity: 0.5;
position: absolute;
display: block;
}
/* make any immediate child elements above our darkening mask */
.eventBannerContainer > * {
position: relative;
}
