背景图片超过了body的最大宽度

给body设置了max-width: 540px, margin: 0 auto 为何在超过max-width的屏幕上 给body 设置的 background-image 依旧全屏显示?

阅读 5.4k
2 个回答

<body>标签的背景图起始位置永远在浏览器窗口的左上角,你设置了540宽度,它还是从窗口左上角开始,你的图片比较大,所以看起来就是全屏,你找张小图

background: url(...) no-repeat;

这样就会发现,背景图片只出现在了左上角。
所以一般不去设置<body>的宽度,而是在里面套一层<div>,如果你一定要给<body>写个宽度,你可以设置background-postion把背景图移动到你需要的位置,不过这纯属吃饱了坑自己。

对这这种结构,应该使用一个 div 作为你想居中显示并加背景的容器,而不是使用在 body 上。
另外下面这两个样式属性合理运用……

display: block;
overflow: hidden;
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题