如何使用CSS使背景变暗？

Question

我有一个带文本的元素。每当我降低透明度时，整个页面的透明度都会降低。有没有办法只能让background-image变暗，而不影响其他任何东西？

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

- user3326523

Answer 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浏览器支持，请参见本博客。

2023年更新：现代浏览器都支持RGBa： caniuse链接

- shin

---

这个有任何跨浏览器的问题吗？ - Jon P

如果我们想要分别指定背景图片和元素本身，我们需要使用哪个属性？ - Petruza

@Petruza 看起来我们别无选择，只能使用这种语法。请阅读参考文献：_“由于<gradient>属于<image>数据类型，因此它们只能在可以使用<image>的地方使用。因此，linear-gradient()不能用于使用<color>数据类型的background-color和其他属性”_。 - Marco Panichi

Answer 2

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

背景混合模式的兼容性查询

- Helena Bourmault

---

Edge或IE11并不是真正的浏览器。 - stackdave

实际上，这是最好的答案，但如果我们不想更改背景图像 url 的声明（比如 background 或 background-image），那么这个方案是完美的：background-color: #0005; background-blend-mode: darken;。 - Krzysztof Przygoda

Answer 3

如果你想让背景色变亮或变暗，可以使用以下CSS代码

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

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

- Trung

---

谢谢，我不知道 CSS 滤镜。如果有帮助，这里是 Can I Use 的状态（2020 年 3 月）。 - Reed Dunkle

请注意，这将使具有这些类的元素内部的所有内容（包括文本）变亮/变暗。 - Heretic Monkey

Answer 4

使用: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;
}

看看我的钢笔 >

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

- curtybear

---

好的，但在Windows 10上的Firefox 47.0.1中无法工作。但在IE上可以。你有任何解决Firefox的方法吗？ - John Max

@JohnMax 火狐浏览器现在正常工作了，只需要再等几年。 - curtybear

Answer 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>

- user7234396

Answer 6

你可以使用 backdrop-filter: brightness(50%);。

警告：

- 因为它适用于元素后面的所有内容，为了看到效果，你必须使元素或其背景至少部分透明。 - 不幸的是对于 Firefox，在此时需要用户显式启用该功能。

- Mulaga

Answer 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/

- Alex Price

Answer 8

你可以使用一个容器来作为背景，将其设置为绝对定位和负的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;
}

- Yooz

Answer 9

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

- Daniel Sokolowski

---

由于 ::before 的默认 display 是 inline，因此它不接受 width 和 height。 - connexo

谢谢@connexo，看起来我复制相关样式时漏掉了。 - Daniel Sokolowski

子元素的相对定位是我所需要的缺失的部分。 - MacroMan

Answer 10

我尝试使用background-blend-mode来实现这个效果：

 <div
    class="dark-background w-screen px-24"
    style="
      background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fdevx.work%2Fblog%2Fwp-content%2Fuploads%2F2021%2F03%2FLOUNGE-01-1920x1024.jpg&f=1&nofb=1&ipt=bc89ea53d39a8da6df1ca59ed5daba3155d44fa3627e5071448aecd5da8be808&ipo=images');
      background-color: gray;
      background-blend-mode: multiply;
      background-attachment: fixed;
      height:100vh;
      width:100vh;
      color:white;
    "
  >Here is a text !! :) </div>

- Iman khayati