css 背景层级 |hbuilder外链css

当只设置了背景颜色时，它会显示在所有背景图片的下面。如果有多个元素都有背景颜色，它们的层级则按照出现的顺序从下往上排列。

p {
background-color: yellow;
}

当同时设置了背景颜色和一张背景图片时，背景颜色会显示在背景图片的下面。

p {
background-color: yellow;
background-image: url("bg.png");
}

当设置了多张背景图片时，它们的层级也按照出现的顺序从下往上排列。也就是说，背景图片最后出现的那张会显示在最上面。

p {
background-image: url("bg1.png"), url("bg2.png"), url("bg3.png");
}

如果设置了背景图片和渐变色，渐变色会显示在背景图片的上面。这是因为渐变色属于背景颜色的一种，比图片的优先级更高。

p {
background-image: url("bg.png");
background-color: linear-gradient(to bottom, blue, white);
}

最后需要注意的一点是，如果想将背景图片覆盖到父元素的背景上，可以使用以下代码：

p {
background-image: url("bg.png");
background-clip: content-box;
}

这样背景图片就不会受到父元素的背景颜色或图片的影响，可以完全显示。