为什么body设置的SVG背景图片不显示？已确认资源URL可正常访问

核心问题原因 #

• 路径格式错误：Web资源路径统一使用正斜杠/，你当前使用的Windows系统反斜杠\浏览器无法正确识别
• 相对路径计算错误：你的CSS文件存放在oblig2根目录下，../代表向上跳出一级目录，再访问oblig2/bilder/bits.svg相当于路径跳到了oblig2文件夹的上级再找对应资源，自然无法定位
• 背景属性缺失：未设置背景尺寸、重复规则和定位，即使资源加载成功也可能无法铺满整个页面
• 元素背景遮挡：main元素设置了background-color: white，会遮挡对应区域的body背景
• body高度不足：默认body高度由内容撑开，若内容高度小于视口高度，背景也无法覆盖整个页面

修复步骤 #

1. 修正CSS中背景相关代码 #

把原来的body样式替换成以下代码：

body {
    margin: 0; /* 清除浏览器默认边距避免四周出现白边 */
    min-height: 100vh; /* 让body高度至少等于浏览器视口高度 */
    background-image: url("./bilder/bits.svg"); /* CSS文件在oblig2根目录时，直接访问同级的bilder文件夹内资源 */
    background-repeat: no-repeat; /* 禁止背景默认平铺 */
    background-size: cover; /* 背景自动缩放铺满整个body区域 */
    background-position: center; /* 背景图居中显示 */
}

如果不需要保留main的白色背景，直接修改main的背景色为透明即可：background-color: transparent;

2. 统一优化所有资源路径写法 #

• 所有HTML、CSS中的资源路径，都把反斜杠\替换为正斜杠/
• 把HTML中引入CSS的绝对路径替换为相对路径（如果HTML文件也存放在oblig2根目录）：

<link rel="stylesheet" type="text/css" href="./stil.css" />

3. 验证SVG文件本身有效性 #

如果修改路径后仍无法显示，做如下检查：

• 直接将bits.svg拖入浏览器地址栏，确认可以正常渲染
• 用文本编辑器打开bits.svg，检查根节点<svg>是否存在width、height或者viewBox属性，缺失的话对应补充即可：

<svg width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<!-- 原有SVG内容 -->
</svg>

内容的提问来源于stack exchange，提问作者jacob starheim