背景图片无法显示：我的HTML/CSS代码为何看不到图片？

你的HTML和CSS代码如下：

HTML代码 #

<div id="Image">
<!--         <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>

CSS代码 #

#Image {
    background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
    background-repeat: repeat;
}

问题原因 #

核心问题是空的<div id="Image">没有尺寸：块级元素如果没有内容、也未设置宽高，默认高度为0，宽度虽为父容器100%但高度为0，导致背景图没有可渲染的区域，自然无法显示。

另外，url()中的双引号虽然语法合法，但可以去掉以避免潜在的转义问题（不过这不是导致图片不显示的直接原因）。

修复方案 #

给#Image设置明确的宽高，让背景图有可显示的区域：

#Image {
    background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
    background-repeat: repeat;
    /* 设置宽高，根据需求调整数值 */
    width: 100%;
    height: 400px;
}

或者给div添加内容（比如文本、内联元素），让元素自动撑开高度，但这种方式不如显式设置宽高可控。

内容的提问来源于stack exchange，提问作者Michael Stiekema