面试题：CSS中背景颜色与背景图片共存时的显示规则

显示顺序：在CSS中，背景图片默认显示在背景颜色之上，即背景颜色作为底层，背景图片覆盖在其上方。
确保背景图片透明部分显示背景颜色：只要背景图片本身存在透明区域（比如PNG格式的图片支持透明度），无需额外设置，背景颜色就会透过这些透明区域显示出来。

以下是代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: lightblue;
            background-image: url('transparent-image.png'); /* 假设存在一张透明背景的图片 */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

在上述代码中，.box 类设置了浅蓝色的背景颜色和一张透明背景的图片作为背景。图片的透明部分会显示出浅蓝色的背景颜色。

面试题：CSS中背景颜色与背景图片共存时的显示规则

知识考点

面试题答案