背景图片缩放及定位失效求助：background-size:cover未生效

我有一张2000x2000 px的图片，希望它能在不同尺寸显示器上自适应缩放，尝试用background-size: cover;但该属性并未生效，以下是我的实现代码：

CSS代码 #

body {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='4000' preserveAspectRatio='none' viewBox='0 0 1920 4000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1537%26quot%3b)' fill='none'%3e%3crect width='1920' height='4000' x='0' y='0' fill='url(%26quot%3b%23SvgjsRadialGradient1538%26quot%3b)'%3e%3c/rect%3e%3cpath d='M-79.38 2488.24L-79.38 2488.24' stroke='%23132e65' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M-79.38 2488.24L-45.34 2643.54' stroke='%23132e65' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M2036.36 2140.27L2036.36 2140.27' stroke='%23132e65' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='1895.54' cy='3665.24' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='2017.06' cy='3489.12' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='2061.31' cy='3665.29' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='2027.9' cy='3844.57' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='2019.91' cy='3954' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='1988.84' cy='4156.66' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M1842.84 4003.3L1842.84 4003.3' stroke='hsl(228.5%2c 77.2%25%2c 51.5%25 fill='%238b9ad9'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1537'%3e%3crect width='1920' height='4000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='100%25' cy='100%25' r='4436.94' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1538'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 51%2c 158%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3cradialGradient id='SvgjsRadialGradient1539'%3e%3cstop stop-color='white' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%231735b3' offset='0.2'%3e%3c/stop%3e%3cstop stop-color='rgba(23%2c 53%2c 179%2c 0)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");    
    background-size: cover;
    background-position: right bottom;
    background-size: cover;
}    

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Giorgi Chkhaidze | Junior Front-End Developer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>

问题原因及解决办法 #

1. 容器高度不足：默认情况下body的高度由内容撑开，当前页面body为空，高度为0，背景图片无法正常显示。需要给html和body设置100%高度：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

2. SVG的宽高比设置冲突：你的SVG里设置了preserveAspectRatio='none'，这会强制SVG忽略自身宽高比拉伸填充容器，导致background-size: cover的效果被覆盖。需要将该属性改为preserveAspectRatio='xMidYMid slice'（对应cover的裁剪缩放效果），或者preserveAspectRatio='xMidYMid meet'（对应contain的完整显示效果）。修改后SVG的开头部分应为：

<svg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='4000' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1920 4000'>

3. 清理冗余CSS：代码中重复写了两次background-size: cover;，保留一次即可。

修正后的完整CSS #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1920' height='4000' preserveAspectRatio='xMidYMid slice' viewBox='0 0 1920 4000'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1537%26quot%3b)' fill='none'%3e%3crect width='1920' height='4000' x='0' y='0' fill='url(%26quot%3b%23SvgjsRadialGradient1538%26quot%3b)'%3e%3c/rect%3e%3cpath d='M-79.38 2488.24L-79.38 2488.24' stroke='%23132e65' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M-79.38 2488.24L-45.34 2643.54' stroke='%23132e65' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M2036.36 2140.27L2036.36 2140.27' stroke='%23132e65' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='1895.54' cy='3665.24' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='2017.06' cy='3489.12' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='2061.31' cy='3665.29' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='2027.9' cy='3844.57' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='2019.91' cy='3954' fill='%23132e65'%3e%3c/circle%3e%3ccircle r='5' cx='1988.84' cy='4156.66' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M1842.84 4003.3L1842.84 4003.3' stroke='hsl(228.5%2c 77.2%25%2c 51.5%25 fill='%238b9ad9'%3e%3c/circle%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1537'%3e%3crect width='1920' height='4000' fill='white'%3e%3c/rect%3e%3c/mask%3e%3cradialGradient cx='100%25' cy='100%25' r='4436.94' gradientUnits='userSpaceOnUse' id='SvgjsRadialGradient1538'%3e%3cstop stop-color='%230e2a47' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 51%2c 158%2c 1)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3cradialGradient id='SvgjsRadialGradient1539'%3e%3cstop stop-color='white' offset='0.1'%3e%3c/stop%3e%3cstop stop-color='%231735b3' offset='0.2'%3e%3c/stop%3e%3cstop stop-color='rgba(23%2c 53%2c 179%2c 0)' offset='1'%3e%3c/stop%3e%3c/radialGradient%3e%3c/defs%3e%3c/svg%3e");    
    background-size: cover;
    background-position: right bottom;
}    

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