我们还能一起使用背景图像和背景颜色吗？

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背景颜色设置为蓝色，然后覆盖SeinopSys声明的具有不透明背景的.jpg。 您有两个选择，要么创建具有透明背景的图像版本（例如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;
}

这是小提琴