如何使用CSS为背景图像着色？

Question

我通过CSS设置了背景图片。

html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

我计划为网站的不同页面提供不同的背景图片：因此，文本在其上清晰可见非常重要。现在，我在中间的#main内容框中有一个半透明的黑色背景，以确保易读性：

#main {
background: rgba(0, 0, 0, 0.5);
}

但我真正想做的是在整个背景图像上都有这种半透明的背景，因为黑盒看起来有点笨重。我尝试制作一个<div id=#tint>，其中包含整个HTML文档并将rgba（0,0,0,0.5）提供给#tint，但这根本不起作用 - 我可以什么都不改变，或者我可以让整个背景成为一个简单的灰色，根本没有可见的背景图像。这根本不可能吗？

Answer 1

使用background-blend-mode获得简单的色调

您可以使用background-blend-mode css属性：

.background-tint {
  background-color: rgba(200,100,0,.5); // Tint color
  background-blend-mode: multiply;
}

将它放在任何带有背景图像的元素上，你就可以了。

该属性在现代浏览器中得到很好的支持 NOT 包括IE最新版和Edge版（preview state可以启用标记）。对于不支持的浏览器，您可以使用polyfill。

<强> Working demo

其他选项

使用平面线性渐变和多重背景叠加

.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 )
}

<强> Working demo

使用透明背景

.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; }

<强> Working Demo

Answer 2

我认为您需要创建一个具有所需半透明背景的叠加元素（可能为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。

Answer 3

这对我很有用：

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%)
),

Answer 4

这将是overlay属性 https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingoverlay 但这是一个草案。不要依赖它

Answer 5

尝试不透明度：

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */