background-attachment:fixed 问题

28 Aug 2012 in Web前端 - Hits()

今天发现background-attachment:fixed原来不是这么简单：

见:http://reference.sitepoint.com/css/background-attachment

The value fixed stops the background-image from scrolling with its containing block. Note that although the fixed background-image may be applied to elements throughout the document, its background-position is always placed in relation to the viewport. This means the background-image is only visible when its background-position coincides with the content, padding, or border area of the element to which it is applied. Thus, a fixed background-image doesn’t move with elements that have a scrollbar—see overflow—because it’s placed in relation to the viewport.

我真是晕，fixed的情况下，不管background-attachment:fixed设置到哪个元素，其background-position是依据body来定位的。

使用background-attachment:scroll则是相对本元素定位。

测试FF,IE8,Chrome都是这样。

可依据这个例子来看:

<html>
<head>
<style type="text/css">
.hi
{ 
  height:200px;
  width:200px;
  border:1px solid blue;
  background-image:url('eg_bg_03.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:left top;
  padding: 0px;
}

</style>
</head>

<body>
<body>
<div style="height: 500px;">i</div>
<div class="hi">
zheli
</div>
</body>
</html>

你会发现背景图没看到。