Можно ли использовать фоновое изображение и фоновый цвет вместе?

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 в инструментах dev, тогда я вижу сплошной синий фон. Но я не могу заставить его показать над 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, так что вы можете принять это во внимание.

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