Цвет фона поверх фонового изображения - в чем причина?

Question

Я пережил странную проблему (для меня, как новичка в мире CSS). Я пытался получить фоновое изображение с прозрачным цветом поверх него. Изображение было фоном главной страницы:

body {

font-family: 'Raleway', 'Open Sans', sans-serif;
font-weight: 400;
line-height: 1.6;
background: rgba(0,0,0,.3) url('..img/image.jpg') no-repeat;
background-size: cover;

min-height: 100vh; }

Это не сработало для меня. Не знаю почему?

Я проверил инструменты разработчика, добавил отдельный цвет фона, и он тоже не работал. Я попытался найти решение здесь: Полупрозрачный цветовой слой поверх background-image? и treid предлагаемых решений. У меня не сработало.

Но когда я добавил класс в и создал следующие строки:

.body {
background: 
    linear-gradient(
    rgba(0, 0, 0,.5), 
    rgba(0, 0, 0,.5)
),
    url('../img/bg_image.jpg') no-repeat;
background-size: cover; }

Это сработало! Но я до сих пор не знаю, почему?

Это проблема специфичности? Возможно, что-то другое? Если есть кто-то, кто может ответить на мой вопрос (с примером qucik), я буду благодарен.

Итак, решение, которое я нашел, - это приведенный выше код, но я не понимаю, когда предыдущая попытка не сработала у меня.

Ура, Камиль

Answer 1

Свойство background css на самом деле является сокращением для различных свойств, как это объяснено здесь .Одним из этих свойств является background-image, это свойство поддерживает изображения и градиенты , но важной частью является то, что оно также поддерживает Multiple Background Images , с учетом этого вы можете добавить какмного фонов для одного и того же элемента.

background: url(test.pnd), linear-gradient(...),...

В первом примере вы используете

rgba(0, 0, 0,.5), 

Это не линейный градиент, ни изображение, ни фон-color свойство, поэтому оно не будет работать.

Хорошим примером этого использования является фон [узоры, созданные Леа Веру.]

Порядок размещения несколькихФоны , по умолчанию первый находится сверху, и они идут вниз оттуда. 4

Answer 2

Как указано в документации :

Вы можете применять несколько фонов к элементам. Это многослойные поверх друг друга с первым фоном, который вы предоставляете сверху и последним фон указан в спине. Только последний фон может включать цвет фона .

И если мы проверим свойство background :

Так что это не действует как фон:

body {
  background:rgba(255,0,0,0.5) ,url(https://lorempixel.com/400/200/);
}

Но это действительно так:

body {
  background: linear-gradient(rgba(255,0,0,0.5),rgba(255,0,0,0.5)),url(https://lorempixel.com/400/200/);
}