background-image - CSS:层叠样式表

background-image: url("/shared-assets/images/examples/lizard.png");
background-image:
url("/shared-assets/images/examples/lizard.png"),
url("/shared-assets/images/examples/star.png");
background-image:
url("/shared-assets/images/examples/star.png"),
url("/shared-assets/images/examples/lizard.png");
background-image:
linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
url("/shared-assets/images/examples/lizard.png");
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
在绘制时,图像以 z 方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像“最接近用户”。
然后元素的边框 border 会在它们之上被绘制,而 background-color 会在它们之下绘制。图像的绘制与盒子以及盒子的边框的关系,需要在 CSS 属性background-clip 和 background-origin 中定义。
如果一个指定的图像无法被绘制 (比如,被指定的 URI 所表示的文件无法被加载),浏览器会将此情况等同于其值被设为 none。
备注:
即使图像是不透明的,背景色在通常情况下并不会被显示,web 开发者仍然应该指定 background-color 属性。如果图像无法被加载—例如,在网络连接断开的情况下—背景色就会被绘制。