必须了解的background几个属性(background-position、background-repeat等)(2)
Background attachment属性
background-attachment属性定义用户滚动页面时背景图片会发生什么。它有三个可能值：scroll, fixed and inherit. Inherit 仍然是继承其父元素的设定要充分理解background-attachment属性。首先就得搞清用户滚动页面时，web页面发生了什么。如果你设置值为fixed，那么当你向下滚动页面时，内容向下滚动了，而背景不会跟着滚动。结果就好像内容向上在滚动。当然，如果你设值为scroll，背景就会滚动了。
下面我们看一个例子：
- background-image: url(test-image.jpg);
- background-position: 0 0;
- background-repeat: no-repeat;
- background-attachment: scroll;
当我们向下滚动页面时,背景图片向上滚动直至消失.
再看一个fixed例子:
- background-image: url(test-image.jpg);
- background-position: 0 100%;
- background-repeat: no-repeat;
- background-attachment: fixed;
向下滚动页面，背景图片依然可见.
值得注意的是背景图片只能在其元素内移动，下面就是一个例子：
- background-image: url(test-image.jpg);
- background-position: 0 100%;
- background-repeat: no-repeat;
- background-attachment: fixed;
部分图片消失了，因为出元素边界了.
简单的Background属性
我们可以把这些属性设定写在一个属性内. 它的格式如下:
- background: <color> <image> <position> <attachment> <repeat>
例如, 这些设定...
- background-color: transparent;
- background-image: url(image.jpg);
- background-position: 50% 0 ;
- background-attachment: scroll;
- background-repeat: repeat-y;
... 可以写成:
- background: transparent url(image.jpg) 50% 0 scroll repeat-y;
而且你无需设定每个值。如果你不写，就会使用默认值。因此，上面的也可写成这样：
- background: url(image.jpg) 50% 0 repeat-y;
背景的“非常规”应用
背景属性除了设置美化元素之外，也有其他广泛的非常规用途。
Faux Columns
当使用float属性布局时，确保两纵行长度相等可比较困难。如果两个元素大小不一，那背景图片就乱了。Faux columns是个简单的解决方案，首先发表在 A List Apart。
简单的说就是在它们的父元素中设置一个整体的背景图片，图片中纵行的位置与分开的实际位置正好符合。
Text Replacement
web上字体的选择余地很小。我们的常用方法是制作文字的图片，不过只这么干就对搜索引擎不友好了。为此一个流行的方法是用背景属性显示文字的图片，而把其上的文字隐藏起来。这样既对搜索引擎和屏幕阅读器友好，在浏览器里也能看到炫酷的字体。
例如，文字信息这样写:
- <h3 class="blogroll">Blogroll</h3>
如果文字图片是200px宽，75px高, 那我们就用下面的css代码表现整张图片:
- h3.blogroll {
- width: 200px;
- height: 75px; /* 就能显示整张图片. */
- background:url(blogroll-text.jpg) 0 0 no-repeat; /* 设定图片*/
- text-indent: -9999px; /* 向左移动文字9999px以隐藏文字*/
- }
Easier Bullet Points
无序列表选项的默认样式也许不那么好看。那么我们就用背景图片让他们看起来更nicer：
