搜索

网站的背景图上半部分可以正常显示,下半部分目前是空白的 怎么设置

现在的CSS代码如下 body{background: url(/templates/jlwj/images/topbg.jpg) no-repeat 50% 40px ; margin:0 padding:0;font-family:Microsoft Yahei;}  不想设置平铺  希望单独设置下半部分的背景图片,该如何操作
头像
匿名用户
1149 次浏览2021.02.10 提问
20

专业回答

头像
2026.07.22 回答

要实现“上半部分显示原图,下半部分显示另一张图且不平铺”,最推荐的方法是使用 ‌CSS 多背景(Multiple Backgrounds)‌ 特性。

你可以直接在 body 的 background 属性中写入两张图片,用逗号隔开。第一张是顶部的图,第二张是底部的图。

修改后的代码示例:

body {

    /* 

       1. 第一层背景:顶部图片 

          - url: 你的顶部图片路径

          - no-repeat: 不重复

          - 50% 0: 水平居中,垂直靠顶 (或者保持你原来的 40px)

          - auto auto: 保持原尺寸,或者指定具体大小如 1920px 300px

       2. 第二层背景:底部图片 

          - url: 你的底部图片路径

          - no-repeat: 不重复

          - 50% 100%: 水平居中,垂直靠底

          - auto auto: 保持原尺寸

    */

    background: 

        url(/templates/jlwj/images/topbg.jpg) no-repeat 50% 40px,

        url(/templates/jlwj/images/bottombg.jpg) no-repeat 50% 100%;

    /* 确保背景色填充空白区域(可选) */

    background-color: #fff; 

    margin: 0;

    padding: 0;

    font-family: "Microsoft Yahei", sans-serif;

    /* 关键:确保 body 至少撑满整个视口高度,否则底部图片可能看不见 */

    min-height: 100vh;

}

核心要点说明:

  1. ‌顺序很重要‌:在 background 简写中,‌写在前面‌的图片层级更高(在上层),‌写在后面‌的图片层级更低(在下层)。

  2. ‌定位控制‌:

  3. 顶部图:50% 40px 表示水平居中,距离顶部 40px。

  4. 底部图:50% 100% 表示水平居中,距离底部 0px(即紧贴底部)。如果你想让底部图片距离底部有一点距离,可以改为 50% calc(100% - 20px)。

  5. ‌防止空白‌:如果内容很少,body 高度不够,底部图片可能不会出现在屏幕最下方。加上 min-height: 100vh; 可以确保背景铺满整个屏幕高度。

  6. ‌图片尺寸‌:如果底部图片太大或太小,可以在每张图的定位后面加上 / 尺寸,例如:
    url(bottom.jpg) no-repeat 50% 100% / 100% auto (宽度100%,高度自适应)。

抢首赞

其他回答(2条回答)

头像
2021.02.15 回答

要不你换个浏览器试试呢,360的浏览器不错的

抢首赞
头像
2021.02.11 回答
重新打开就行了
抢首赞
置顶