我通过CSS设置了一个背景图像。
html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}
我计划为网站的不同页面设置不同的背景图片，因此文本对其非常重要。目前我在 #main 内容框中使用半透明黑色背景来确保可读性：
#main {
background: rgba(0, 0, 0, 0.5);
}
但是，我真正想做的是在整个背景图像上具有这种半透明背景，因为黑色框看起来有点笨重。我尝试制作一个包括整个HTML文档的<div id=#tint>，并将rgba(0, 0, 0, 0.5)赋予#tint，但完全行不通——我要么什么也看不到变化，要么整个背景都变成了简单的灰色，根本没有任何背景图像可见。这是否完全不可能？
background-blend-mode来实现简单的着色效果。background-blend-mode CSS 属性：
.box {
width: 300px;
height: 300px;
background-size: cover;
background-image: url('https://picsum.photos/300');
}
.background-tint {
background-color: rgba(200,100,0,.5);
background-blend-mode: multiply;
}<div class="box background-tint"></div>filter进行复杂的着色您可以使用filter CSS属性：
.box {
width: 300px; height: 300px;
background-size: cover;
background-image: url('https://picsum.photos/300');
}
.background-tint {
filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}<div class="box background-tint"></div>hue-rotate的值。.background-tint {
background-image:
linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
url('http://placehold.it/420')
}
less
.background-tint(@tint-color, @image-url) {
background-image:
linear-gradient( @tint-color, @tint-color ),
url( @image-url )
}
sass
@mixin background-tint($tint_color, $image_url) {
background-image:
linear-gradient( $tint_color, $tint_color ),
url( $image_url )
}
这种方法的优点是适用于大多数浏览器，并且只需将其添加到任何元素的一个漂亮的类中。
缺点是，如果该元素内还有其他内容，则必须将其包装在一个带有某种定位的 div 中，最好使用 position: relative。
示例：
.box {
width: 300px; height: 300px;
background-size: cover;
background-image: url('https://picsum.photos/300');
color: #facebc;
}
.background-tint { position: relative; }
.background-tint::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
/* Tint color */
background-color: rgba(100,0,0,.5);
margin: auto;
}
.u-relative { position: relative; z-index: 1; }<div class="box background-tint">
<div class="u-relative">300 x 300</div>
</div>我认为您需要创建一个覆盖层元素（可能是div），该元素具有所需的半透明背景。类似于：
.overlay {
z-index: 1;
height: 100%;
width: 100%;
position: fixed;
overflow: auto;
top: 0px;
left: 0px;
background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}
当然，还有一个小演示：小链接。
<body> 设置了 10% 30% 的边距。现在内容已经消失了。我对网页设计并不是很有经验，不知道为什么会这样。 - user1623053div 中，就像它是 body 一样。编辑：哦，好吧，给 body 添加边距是个坏主意。使用另一个元素并给它相同的边距即可。 - Chris.tinted-image {
background:
/* top, transparent red, faked with gradient */
linear-gradient(
rgba(255, 0, 0, 0.45),
rgba(255, 0, 0, 0.45)
),
/* bottom, image */
url(image.jpg);
}
借鉴另一个答案，您可以使用Less中的现有颜色来完成此操作，例如：
linear-gradient(
fade(@brand-primary, 50%),
fade(@brand-primary, 50%)
),
background-blend-mode的第二个响应在IE或Edge上不受支持。"https://caniuse.com/#feat=css-gradients - Clifford Fajardo这个属性可能是 overlay
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay
但它只是一个草案，请勿依赖它
在我看来，这是问题最简单的解决方案。
.parent-div{
background-color : desired-color
}
#image-id{
opacity: dersired_value%
}
尝试使用不透明度：
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
div内字体颜色的方法。 - pjammercolor参数的颜色。 - hitautodestructfilter属性，应该可以仅涵盖非透明区域。缺点是很难选择色调的颜色。 - hitautodestruct