我們還能一起使用背景圖像和背景顏色嗎？

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

這是小提琴