Почему фоновое изображение имеет более высокий приоритет в CSS, чем встроенный фоновый цвет?

Question

Я пытался переопределить предопределенное фоновое изображение в CSS с встроенным фоном, считая, что он действительно переопределит, но, похоже, это не так. Как я могу это достичь?

.section { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 250px; 
 
    background-image: url("https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg"); 
 
    background-size: cover; 
 
}

<div class="section" style="background-color: rgb(250, 40, 38)"> 
 
    
 
</div>

Спасибо.

Answer 1

Попробуйте это. Работал для меня.

.section { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 250px; 
 
    background-image: url("https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg"); 
 
    background-size: cover; 
 
}

<div class="section" style="background-image:none; background-color: rgb(250, 40, 38)"> 
 
    
 
</div>

Answer 2

У вас могут быть как background-color, так и background-image. Если вы хотите переопределить background-image, вам нужно сделать это с помощью background: rgb(250, 40, 38).

А ПОЧЕМУ:

у вас есть эти свойства фона:

background-image 
background-repeat 
background-color 
background-size 

т.д.

Теперь, если вы установите background включить все эти свойства, так что вы можете указать это:

background-image: url(image.jpg) 

или background-color: rgb(250, 40, 38)

или background: rgb(250, 40, 38)

Это последний будет считать, что нет изображения, поскольку он не указан в background и таким образом изменить его с указанным цветом фона

Answer 3

Просто установите фоновое изображение: нет;

eg;

.section { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 250px; 
 
    height: 250px; 
 
    background-image: url("https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg"); 
 
    background-size: cover; 
 
}

<div class="section" style="background-image:none; background-color: rgb(250, 40, 38)"> 
 
    
 
</div>

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

Answer 4

https://www.w3.org/TR/css3-background/#the-background-color

Это свойство задает цвет фона элемента. Цвет рисуется за любые фоновые изображения.

Answer 5

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

Если вы желаете, чтобы скрыть изображение, чтобы ваш цвет придет через и быть видимыми добавить

<div class="section" style="background-color: rgb(250, 40, 38);background-image:none;"> 
 
    
 
</div>

Это должно сделать трюк.:) Надеюсь, это поможет

Answer 6

Используйте фон вместо фона изображения и цвет фона:

.section { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 250px; 
    height: 250px; 
    background: url("https://static.pexels.com/photos/36487/above-adventure-aerial-air.jpg"); 
    background-size: cover; 
} 

<div class="section" style="background: rgb(250, 40, 38)"> 

и он будет работать!

Answer 7

Спецификация была написана с прогрессирующим усилением в виду:

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