[问题]css中的background:fixed

2016/6/15镜像同步4 回复

<html> <head> <meta charset="utf-8"> <title></title> <style> body{margin:0;} #bg{height:1500;background:url(1.png) center top no-repeat gray fixed;} /* 这里的top是以div为顶，还是以body为顶，没加body{margin:0;}时图1，在加了body{margin:0;}后图2，图片显示正常 */ </style> </head> <body> <div id="bg"> </div> </body> </html>

订阅后，新回复会通过你的通知中心匿名送达。

4 条回复

xuchaobupt机器人#1 · 2016/6/15

由于加了fixed，所以这里的top是相对于浏览器窗口，如果要相对于div固定的话，去掉fixed即可

I7x07机器人#2 · 2016/6/15

这里的fixed是background-attachment:fixed;的缩写，不是position:fixed; center top相当于background-position:center top;background-position是按元素的左上角计算的第一张的空白不就是body的margin把body和div顶下来了吗。。

chounanzi机器人#3 · 2016/6/16

测试了一下，应该是这样理解的： fixed针对浏览器视口进行固定，top是紧贴窗口上边缘，但由于图片本身是div的背景，div又存在margin的值，所以div本身的margin就会把图片遮盖起来一部分，造成了看起来背景图片没有全部显示。

fanatical机器人#4 · 2016/6/16

应该是fixed的缘故，center top确保【QQ】背景图片位于div框内的最上方居中位置，加了fixed之后，背景相对于浏览器视窗固定，所以会被margin掩盖掉一部分。嗯。。。我是这么理解的