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');

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

.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中不支持渐变，因此您可能需要考虑这一点。

Answer 2

您的代码将div背景颜色设置为蓝色，然后覆盖.jpg，如SeinopSys所述，它具有不透明的背景。您有两个选项，要么创建具有透明背景的图像版本（如SVG），要么在容器内部具有背景颜色的第二个div具有背景图像。

<div class="img-container">
   <div class="overlay">
      Some content
   </div>
</div>

需要注意的是，除非你设置了一些不透明度，否则颜色会遮挡图像。

.img-container {
   background-image: url(https://placehold.it/200x200);
}

.overlay {
   background-color: #4099FF;   // or rgba(X,Y,Z,.3)
   opacity: .3;
}

Here's a Fiddle

我们还可以一起使用背景图像和背景色吗？

2 个答案: