如何通过CSS调整背景尺寸？尝试未果附相关代码

嘿，我看你在调整移动端背景尺寸时碰到了瓶颈，先看看你代码里的几个关键问题，咱们一步步来搞定它：

你的原始代码里的问题 #

• @media规则语法错误：在移动端媒体查询里，你直接写了background-image和background-size属性，但没有指定这些属性属于哪个元素（比如body），而且background-size: auto; 480px;这种写法是无效的，CSS属性值不能拆分换行，格式也不符合规范。
• 非法类名：.1、.2这类以数字开头的类名不符合CSS语法规则，浏览器可能无法正确解析，建议改成.box1、.box2这类合法名称。
• 冗余代码：移动端媒体查询里重复写了background-image: url("bgg.jpg");，如果移动端不需要更换背景图，完全可以继承body的背景设置，不用重复声明。

修正后的完整代码 #

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Convite</title>
    <style>
        body {
            background-image: url("bgg.jpg");
            background-repeat: no-repeat; /* 防止背景重复平铺 */
            background-position: center; /* 让背景居中显示 */
            background-size: cover; /* 覆盖整个视口，保持图片比例 */
        }

        @media screen and (max-width: 480px) {
            body {
                /* 如果移动端需要调整背景尺寸，这里修改即可，无需重复声明背景图 */
                background-size: 100% auto; /* 宽度占满视口，高度按比例自动适配 */
            }

            .box1 {
                height: 300px;
                width: 480px;
            }

            .box2 {
                height: 107px;
                width: 480px;
            }

            .box3 {
                height: 34px;
                width: 480px;
            }
        }
    </style>
</head>
<body>
    <!-- 你的页面内容 -->
</body>
</html>

关键调整说明 #

• background-size的可选值：
  • cover：背景图会覆盖整个容器，可能裁剪部分内容，但保证没有空白区域，适合全屏背景场景。
  • contain：背景图完整显示在容器内，可能会在容器边缘留下空白，但保证图片比例不变。
  • 100% auto：宽度占满容器，高度按比例自动缩放，适合需要背景宽度适配视口的需求。
• 媒体查询的正确写法：所有移动端的样式都要绑定到对应的元素上（比如body），不能直接裸写属性。
• 合法类名：类名必须以字母、下划线或连字符开头，后面可以跟数字、字母等，这样浏览器才能正确识别解析。

如果你的需求是让背景图在移动端完全适配屏幕，background-size: cover配合background-position: center通常是最稳妥的选择，你可以根据实际显示效果调整属性值~

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