1.当background-attachment:fixed时,元素会根据视窗进行定位。因此,背景模式都从视窗的左上角开始平铺,而不是从单个元素的左上角开始。对于body,可以看到整个重复模式。不过,对于其他元素,只是在其内边距和内容区才能看到它的背景。
span{ background:url(mm1.jpg) fixed 0px 0px #000; } <div style="width: 420px;background-color: silver;padding: 10px;margin-top: 50px;border: 1px solid"> <div class="neg"> a paragraph </div> </div> <span style="border:1px solid;"> next div <br> next div<br>next div <br> next div next div <br> next div<br>next div <br> next div next div <br> next div<br>next div <br> next div next div <br> next div<br>next div <br> next div next div <br> next div<br>next div <br> next div <br><br><br><br><br/><br><br><br><br><br><br> </span>
拖动滚动条:
?
修改css代码为:?
body,span{ background:url(mm1.jpg) fixed 0px 0px #000; }
?
拖动滚动条
?
这种功能可以用来创建一些非常复杂的效果。其中最有名的例子是“复螺旋变形”演示(http://meyerweb.com/eric/css/edge/complexspiral/glassy.html)
这种视觉效果是通过为body元素指定不同的固定关联背景图像生成的。整个演示有一个HTML文档、4个JPEG图像和一个样式表驱动。由于所有这4个图像都位于浏览器
窗口的左上角,但只是与其他元素相交的部分可见,这些图像实际上会交叠,产生一种半透明波纹玻璃的感觉。
?
参考文章:CSS权威指南(第三版)
?