如何使用 CSS 调暗背景？

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

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

您可以使用一个容器作为背景，放置为绝对和负 z 索引: Http://jsfiddle.net/2yw7g/

超文本标示语言

<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;
}
小开
最佳答案

只需将此代码添加到您的图像 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);
}

参考资料: 线性梯度()-CSS | MDN

更新: 不是所有的浏览器都支持 RGBa，所以你应该有一个“备用颜色”。这种颜色最有可能是实心的(完全不透明)。有关 RGBa 浏览器支持，请参考此 博客。

小开

为了增加已经存在的内容，请使用以下内容:

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/

小开

使用: after psuedo-element:

.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

小开

对我来说，过滤/渐变方法不起作用(可能是因为现有的 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;
}
小开

使用 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>

小开

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

我可以用来混合背景吗

小开

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

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


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

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

  background: black;
opacity: 0.5;
小开

根据 亚历克斯 · 普莱斯的的回答，我做了一个 sss 混合:

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

基于 Pierpaolo Cira答案的 decToHex

小开

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

警告:

  • “因为它适用于元素后面的所有内容，所以要看到效果，必须使元素或其背景至少部分透明”。

  • 不幸的是，对于 firefox 来说，这个时候需要: User 必须显式地启用该特性


提交答案