如何使用 CSS 使背景变暗？答案

【问题标题】：How to darken a background using CSS?如何使用 CSS 使背景变暗？
【发布时间】：2014-06-06 03:43:48
【问题描述】：

我有一个包含文本的元素。每当我降低不透明度时，我就会降低整个身体的不透明度。有什么办法可以让background-image 变暗，而不是其他一切？

background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');

【问题讨论】：

标签： html css opacity

【解决方案1】：

只需将此代码添加到您的图像 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(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
    }

参考：linear-gradient() - CSS | MDN

更新：并非所有浏览器都支持 RGBa，因此您应该有一个“后备颜色”。这种颜色很可能是纯色（完全不透明），例如：background:rgb(96, 96, 96)。有关 RGBa 浏览器支持，请参阅此 blog。

【讨论】：

这有什么跨浏览器问题吗？
如果我们想单独指定背景图像和这个属性是什么？
@Petruza 看来我们别无选择，只能使用这种语法。阅读reference:“因为s属于数据类型，只能用在s可以使用的地方。因此，linear-gradient()不会处理使用数据类型的背景颜色和其他属性"

【解决方案2】：

在伪元素之后使用 :

.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;
}

看看我的笔 >

http://codepen.io/craigocurtis/pen/KzXYad

【讨论】：

很好，但在 Windows 10 上的 Firefox 47.0.1 中不起作用。但适用于 IE。火狐有什么解决办法吗？
@JohnMax Firefox 现在运行良好。只需要等几年。

【解决方案3】：

将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;

Can I use for background-blend

【讨论】：

edge 或 IE11 并不是真正的浏览器
其实这是最好的答案，但是如果我们不想触碰背景图片的url声明（比如background或者background-image），这个就完美了：background-color: #0005; background-blend-mode: darken;

【解决方案4】：

当你想要更亮或更暗的背景颜色时，你可以使用这个 css 代码

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

【讨论】：

谢谢，我不知道 css filters。如果它对某人有帮助，这里是Can I Use status（2020 年 3 月）。

【解决方案5】：

box-shadow 或许可以做到这一点

但是，我无法将其实际应用于图像。仅适用于纯色背景

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>

【讨论】：

【解决方案6】：

您可以使用容器作为背景，放置为绝对和负 z-index ： http://jsfiddle.net/2YW7g/

HTML

<div class="main">
    <div class="bg">         
    </div>
    Hello World!!!!
</div>

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;
}

【讨论】：

【解决方案7】：

只是要添加到这里已经存在的内容，请使用以下内容：

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 )");

...用于 70% 线性渐变叠加的跨浏览器支持。要使图像变亮，您可以将所有0,0,0 更改为255,255,255。如果 70% 有点多，请继续更改.7。而且，为了将来参考，请查看：http://www.colorzilla.com/gradient-editor/

【讨论】：

【解决方案8】：

对我来说，过滤器/渐变方法不起作用（可能是由于现有的 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;
}

【讨论】：

由于::before 的默认display 是inline，它不会接受width 和height。
谢谢@connexo，看来我在复制相关样式时错过了。
子元素上的相对位置是我需要的缺失部分

【解决方案9】：

根据Alex Price's 的回答我做了一个scss mixin：

@function decToHex($dec) {
    $dec: round($dec);
    $hex: "0123456789ABCDEF";
    $first: (($dec - $dec % 16)/16)+1;
    $second: ($dec % 16)+1;
    @return str-slice($hex, $first, $first) + str-slice($hex, $second, $second);
}

@mixin darken-bg ($darkAmount) {
    $filterHex: decToHex(255 * $darkAmount);
    background: -moz-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    background: -webkit-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    background: linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='##{$filterHex}000000', endColorstr='##{$filterHex}000000',GradientType=0 )");
}

/* usage */
.some-div {
    @include darken-bg(0.2);
}

decToHex 基于Pierpaolo Cira 答案

【讨论】：

【解决方案10】：

这是我找到的最简单的方法

  background: black;
  opacity: 0.5;

【讨论】：