HTML+CSS之background

第一个专题——background属性

---

今天写一下background属性，具体如下：

1.background-color:默认值：transparent，这是我们在做网页时，经常使用的属性，较为简单。对应的脚本属性：backgroundColor
2.background-image:使用url("本地图片地址") 对应的脚本属性：backgroundImage
3.background-repeat:
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 背景图像自动缩放直到适应且填充满整个容器。（CSS3）
space： 背景图像以相同的间距平铺且填充满整个容器或某个方向。（CSS3）
4.background-attachment： fixed | scroll | local
fixed： 背景图像相对于窗体固定。
scroll： 背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local： 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）
5.background-position：
position:[ left | center | right | top | bottom | percentage | length ] | [ left | center | right |percentage | length ] [ top | center | bottom | percentage| length ] | [ center | [ left | right ] [ percentage | length ]? ] && [ center | [ top | bottom ]
percentage： 用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
length： 用长度值指定背景图像填充的位置。可以为负值。
center： 背景图像横向和纵向居中。
left： 背景图像在横向上填充从左边开始。
right： 背景图像在横向上填充从右边开始。
top： 背景图像在纵向上填充从顶部开始。
bottom： 背景图像在纵向上填充从底部开始
6.background-size：
bg-size = [ length | percentage | auto ]{1,2} | cover | contain
length： 用长度值指定背景图像大小。不允许负值。
percentage： 用百分比指定背景图像大小。不允许负值。
auto： 背景图像的真实大小。
cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

其实呢，还有两个属性，但是在平时很少用到，为了避免混淆，用的时候直接查文档就行了。