html - 我们还能同时使用背景图像和背景颜色吗？

Question

我以为这对我来说是个愚蠢的错误，但我正在为这个而撕毁我的头发。

我无法设置背景图像并将颜色叠加到 div。我有以下 CSS 类:

.blue-pattern {
  background-color: #4099FF;
  background-image: url('/wp-content/themes/bones/library/images/backgrounds/pattern-bw.jpg');
  background-position: top left;
  background-repeat: repeat repeat;
}

像这样将其添加到 div

<div class="blue-pattern pad--tiny">
    <p class="text--white">Blah blah blah, text and stuff</p>                                   
</div>

但是颜色没有透出来。如果我在开发工具中隐藏 background-image，那么我会看到纯蓝色背景。但我无法让它显示在 background-image

上

Answer 1

默认情况下，背景颜色在背景图像后面，因此如果您指定一个背景、颜色和图像，图像后面的颜色将不可见。

但是，您可以指定多个背景，每个背景都有自己的属性。所以一个背景可以有图像，而另一个可以有颜色。然后彩色背景可以覆盖图像..

这在中有详细解释 https://css-tricks.com/tinted-images-multiple-backgrounds/

诀窍是指定一个半透明的彩色背景和一个单独的图像背景。您可以指定它们以逗号分隔。在下面的代码中，第一个背景是半透明背景。普通的 rgba() 颜色不能用作背景，但您可以通过定义具有两倍相同颜色的线性渐变来伪装它。颜色值是颜色的十进制 RGB 值，第四个参数指定 50% 的不透明度。第二个背景是图像本身。

.blue-pattern {
  background: 
    linear-gradient(
      rgba(64, 153, 255, 0.5), 
      rgba(64, 153, 255, 0.5)
    )    
    , url('/your image url');

在完整的代码示例中，它看起来像这样。请注意，我已经更改了 url 并跳过了其他图像属性。

.blue-pattern {
  background: 
    linear-gradient(
      rgba(64, 153, 255, 0.5), 
      rgba(64, 153, 255, 0.5)
    )    
    ,
   url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a8/Portrait_of_Arthur_Conan_Doyle.jpg/460px-Portrait_of_Arthur_Conan_Doyle.jpg');
    
}

.pad--tiny {
  height: 500px; /* for demo */ 
}

<div class="blue-pattern pad--tiny">
    <p class="text--white">Blah blah blah, text and stuff</p>                                   
</div>

请注意，IE8 不支持多重背景，而 IE9 不支持渐变，因此您可能需要考虑到这一点。