我有一个通过 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，但这根本不起作用——我要么什么都没有改变，要么我可以让整个背景变成一个简单的灰色，根本看不到背景图像。这根本不可能吗？
【问题讨论】：
标签： css background tint
background-blend-mode 进行简单的色调您可以使用background-blend-mode css 属性：
.background-tint {
background-color: rgba(200,100,0,.5); /* Tint color */
background-blend-mode: multiply;
}
将它放在任何带有背景图像的元素上，你就可以开始了。
现代浏览器不支持（包括 IE 11）很好地支持该属性。对于不支持的浏览器，您可以使用polyfill。
filter 用于复杂的色调您可以使用filter css 属性：
.background-tint {
filter: sepia(100%) saturate(200%) brightness(70%) hue-rotate(330deg);
}
把它放在任何带有背景图片的元素上，你就可以开始了。
为了改变颜色改变hue-rotate的值。
现代浏览器不很好地支持该属性，包括 IE 11。
.background-tint {
background-image:
linear-gradient( rgba(0,0,0,.5), rgba(0,0,0,.5) ),
url('http://placehold.it/420')
}
我认为这是使用最广泛的技术，但它有硬编码的缺点，即你不能只学习一个类，将其粘贴在一个元素上并进行着色。
你可以把它变成一个 less 或 sass 的 mixin，比如：
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 )
}
.background-tint { position: relative; }
.background-tint::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}
这种方法的优点是可以在大多数浏览器上运行，并且只是一个不错的类，您可以添加到任何元素中。
不利的一面是，如果您在该元素中还有其他任何内容，则必须将其包装在具有某种定位的 div 中 position: relative 效果最好。
例子：
<div class="background-tint">
<div class="u-relative">Some text here</div>
</div>
.u-relative { position: relative; }
【讨论】：
div中缝合字体颜色的工作
color 参数。
filter 属性添加了另一种方法，该方法应该只允许覆盖非透明区域。缺点是色调的颜色不容易选择。
我认为您需要创建一个覆盖元素（可能是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*/
}
当然还有一个小演示：little link。
【讨论】：
<body> 10% 30% 的边距。现在这些内容已经消失了。我对网页设计的经验还不够丰富，不知道为什么。
div 中——将其视为body。 编辑： 哦，好吧，给body 边距是个坏主意。使用另一个元素并给它相同的边距。
这对我很有用：
https://css-tricks.com/tinted-images-multiple-backgrounds/
.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);
}
在另一个答案的基础上，您可以使用现有的颜色来做到这一点，而不是像：
linear-gradient(
fade(@brand-primary, 50%),
fade(@brand-primary, 50%)
),
【讨论】：
background-blend-mode的第二个响应"caniuse.com/#feat=css-gradients
它将是 overlay 属性
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay
但这是一个草稿。不要依赖它
【讨论】：
试试不透明度：
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
【讨论】：