颜色和背景-优快云博客

本文探讨了CSS中使用background-attachment: fixed属性时的视觉效果。特别是如何利用这一特性创建复杂的页面背景，例如“复螺旋变形”演示，展示了多个背景图像如何通过定位在视窗左上角并相互交叠来营造独特的视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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权威指南（第三版）