css 背景固定样式background-attachment属性基础

一、介绍background-attachment属性

在CSS的世界里，背景附件属性（background-attachment）是一个神奇的设定，它决定了网页背景图像是随着页面滚动还是固定不动。这个属性拥有两个魅力四溢的值：scroll和fixed。

让我们先来了解一下这两个值的含义。scroll，作为默认选项，意味着当你滚动页面时，背景图像会跟随页面一起滚动，仿佛它们就是页面的一部分。而当你选择fixed时，背景图像就会如同被钉在墙上一般，无论你怎么滚动页面，它都会稳稳地待在原地。

在以下的HTML示例中，我们创建了一个名为div1的区块，为其设定了一个背景图像"cartoongirl.gif"。这个背景图像不会随着页面的滚动而移动，即使你拖动滚动条，它也会坚守原地。

示例代码如下：

```html

div1 {

width: 160px;

height: 1200px;

border: 1px solid gray;

background-image: url("cartoongirl.gif");

background-repeat: no-repeat;

background-attachment: fixed; / 背景图像固定不动 /

}

```

在浏览器中的预览效果会让你发现，这个背景图像就像是被粘贴在网页上一样，无论你怎么滚动页面，它都会稳稳地停留在那里。值得注意的是，在某些浏览器（如IE或360）中，设置了background-attachment属性后，无法同时设置background-position属性，否则可能会导致图像无法正常显示。在Google浏览器和Firefox浏览器中，你可以放心地同时使用这两个属性。

现在，你可以打开你的浏览器，亲自试试这个有趣的属性，感受它带来的视觉魅力。background-attachment属性，一个掌控背景图像滚动的神奇开关，让你的网页设计更加生动和有趣！