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： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

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