为什么背景图像在CSS中比内联背景颜色具有更高的优先级？

Question

I was trying to override a pre-defined background-image in a CSS with an inline background-color thinking it would actually override, but it looks it doesn't. How can I achieve this?

 .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> 

Thanks.

Answer 1

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

This property sets the background color of an element. The color is drawn behind any background images.

Answer 2

You can have both background-color and background-image . If you want to override the background-image you need to do this with background: rgb(250, 40, 38) .

As for the WHY:

you have these background properties:

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

etc.

Now if you set background you include all these properties so you can specify this:

background-image: url(image.jpg)

or background-color: rgb(250, 40, 38)

or background: rgb(250, 40, 38)

This last one will assume there is no image because it is not specified in background and will thus override it with the specified background color

Answer 3

Just set background-image:none;

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: The reason image has higher priority is if you want to use an image but an object can extend beyond the image size (and you have repeat set to none) then the background-color fills the rest of the space.

Answer 4

I think the issue is that you need to both add your css for the new colour but also the styling for the background image itself.

If you are wanting to hide the image so that your colour will come through and be visible add

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

That should do the trick. :) Hope this helps

Answer 5

Try this. Worked for me.

 .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 6

Use background instead of background-image and background-color :

.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)">

and it will work!

Answer 7

The spec was written with progressive enhancement in mind:

Use background image, to display an image, and background color as a fallback for older browsers.