必须了解的background几个属性(background-position、background-repeat等)
-
- ul {
- list-style: none; /* 去除默认样式. */
- }
- ul li {
- padding-left: 40px; /* 让内容靠内，为背景显示留出空间. */
- background: url(bulletpoint.jpg) 0 0 no-repeat;
- }
本文将介绍几个background属性，这些属性即有CSS2中的，也有部分是可能出现在未来的CSS3中。相信掌握了这些background属性，对大家今后的开发工作十分有帮助。
背景属性——background是css中的核心属性。你应该对它有充分的了解。这篇文章详细讨论了background的所有相关属性，甚至包括background-attachment，还为我们介绍了它在即将到来的CSS3中的样子，还有那些新加入的背景属性。
使用CSS2中的背景属性
回顾
CSS2中有五个与背景相关的属性。它们是：
background-color: 完全填充背景的颜色
background-image: 用作背景的图片
background-position: 确定背景图片的位置
background-repeat: 确定背景图片是否重复铺平
background-attachment: 确定背景图片是否随页面滚动
这些属性能够写在一个简单的属性中：background。必须指出background负责元素内容部分的背景，包括padding和border，但不包括margin。在Firefox, Safari 和 Opera, 以及 IE8中是这样处理的。不过在IE7 和万恶的IE6中就没包括border，区别就像下面的图片示例显示的那样 。
在IE7 和 IE6中Background没有包括border
基本属性
Background color属性
background-color用来描述设置填充背景的颜色。有多种方法来定义确定填充的颜色，下列方法都是等效的：
- background-color: blue;
- background-color: rgb(0, 0, 255);
- background-color: #0000ff;
background-color 也能设置成transparent，这样就能让其下的元素显示出来。
Background image属性
background-image 让你可以使用自己的图片作为背景。它和background-color关系密切。一旦你的图片不足以平铺整个元素背景，空出的部分将显示background-color设置的颜色。它的使用极其简单，不过要记得图片与css文件的位置关系：
background-image: url(image.jpg);
如果图片在文件夹内，就写成这样，均是用得相对路径:
background-image: url(images/image.jpg);
Background repeat属性
默认情况下你的图片会水平和垂直重复直至铺满整个元素。但有时你可能只想向一个方向重复。那么就这么设置：
- background-repeat: repeat; /* 默认值. 会在所有方向重复铺展图片 */
- background-repeat: no-repeat; /* 不重复。图片只出现一张 */
- background-repeat: repeat-x; /* 水平重复铺展 */
- background-repeat: repeat-y; /* 垂直重复铺展 */
- background-repeat: inherit; /* 使用父元素的background-repeat属性值. */
Background position属性
background-position属性控制着背景图片在元素中的位置。掌握的关键是background-position 是图片的左上角定位。
下面是background-position属性的演示。当然我们把background-repeat 属性设置为 no-repeat。
- /* Example 1: 默认. */
- background-position: 0 0; /* i.e. 元素的左上角. */
- /* Example 2: 移向右边. */
- background-position: 75px 0;
- /* Example 3: 移向左边. */
- background-position: -75px 0;
- /* Example 4: 向下移动. */
- background-position: 0 100px;
你可以随意设置背景图片的位置
background-position 属性也可以以关键字，百分比等单位工作，并非一定要精确使用像素（px）。
关键字很常用，在水平方向有:
left
center
right
垂直方向有:
top
center
bottom
就像之前那样使用它们:
background-position: top right;
百分比的使用方法也一样:
background-position: 100% 50%;
效果就是这样： 
笑脸图片被设置到元素的右边的中间
