我有一个包含文本的元素。每当我降低不透明度时，我就会降低整个身体的不透明度。有什么办法可以让
background-imagebackground-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
只需将此代码添加到您的图像 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)2023 年更新：所有现代浏览器现在都支持 RGBa ： caniuse链接
将
background-blend-modedarkenbackground-colorbackground: 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%);
}
在伪元素之后使用 :
.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;
}
查看我的笔 >
也许可以用
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>您可以使用
backdrop-filter: brightness(50%);警告：
“因为它适用于元素后面的所有内容，所以要看到效果，您必须使元素或其背景至少部分透明”。
不幸的是，对于 Firefox，此时需要：用户必须明确启用该功能
您可以使用一个容器作为背景，放置为绝对和负 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;
}
要添加到此处已有的内容，请使用以下内容：
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,0255,255,255.7对我来说，过滤器/渐变方法不起作用（可能是由于现有的 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;
}
根据 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 答案
我尝试使用背景混合模式：
<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;
"
这是我发现的最简单的方法
background: black;
opacity: 0.5;