CSS背景

内容提纲

1. CSS背景
2. 背景属性
3. 实验与案例

[slide] {:.flexbox.vleft}

CSS背景

设置网页中某元素的背景

[slide] {:.flexbox.vleft}

背景属性

[slide] {:.flexbox.vleft}

背景颜色

语法

background-color：<color> 

注意事项

1. 设置或检索对象的背景颜色。
2. 当同时定义了背景颜色和背景图像时，背景图像覆盖在背景颜色之上。
3. 如果设置了 <’ background-image ‘>，同时也建议设置 <’ background-color ‘> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
4. 对应的脚本特性为backgroundColor。

[slide] {:.flexbox.vleft}

背景图像

语法

background-image：<bg-image> [ , <bg-image> ]* <bg-image> = <image> | none 

注意事项

1. 如果设置了 <’ background-image ‘>，同时也建议设置 <’ background-color ‘> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
2. 如果定义了多组背景图，且背景图之间有重叠，写在前面的将会盖在写在后面的图像之上。
3. 对应的脚本特性为backgroundImage。

[slide] {:.flexbox.vleft}

背景平铺

语法

background-repeat：<repeat-style> [ , <repeat-style> ]* <repeat-style> = repeat-x | repeat-y | [repeat | no-repeat | space | round]{1,2} 

注意事项

1. 必须先指定 <’ background-image ‘> 属性。
2. 允许提供2个参数，如果提供全部2个参数，第1个用于横向，第二个用于纵向。
3. 如果只提供1个参数，则用于横向和纵向。特殊值repeat-x和repeat-y除外，因为repeat-x相当于repeat no-repeat，repeat-y相当于no-repeat repeat，即其实repeat-x和repeat-y等价于提供了2个参数值
4. 对应的脚本特性为backgroundRepeat。

[slide] {:.flexbox.vleft}

背景固定

语法

background-attachment：<attachment> [ , <attachment> ]* <attachment> = fixed | scroll | local 

取值

fixed

背景图像相对于窗体固定。

scroll

背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。

local

背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。（CSS3）

[slide] {:.flexbox.vleft}

背景位置

语法

background-position：<position> [ , <position> ]*  

取值

• percentage:用百分比指定背景图像在元素中出现的位置。可以为负值。参考容器尺寸减去背景图尺寸进行换算。
• length:用长度值指定背景图像在元素中出现的位置。可以为负值。
• center:背景图像横向或纵向居中。
• left:背景图像从元素左边开始出现。
• right:背景图像从元素右边开始出现。
• top:背景图像从元素顶部开始出现。
• bottom：背景图像从元素底部开始出现。

[slide] {:.flexbox.vleft}

背景参考圆点

语法

background-origin：<box> [ , <box> ]*  

取值

• border-box：从border区域（含border）开始显示背景图像。
• padding-box：从padding区域（含padding）开始显示背景图像。
• content-box：从content区域开始显示背景图像。

[slide] {:.flexbox.vleft}

语法

background-clip：<box> [ , <box> ]*  

取值

• border-box：从border区域（含border）开始显示背景图像。
• padding-box：从padding区域（含padding）开始显示背景图像。
• content-box：从content区域开始显示背景图像。

[slide] {:.flexbox.vleft}

背景大小

语法

background-size：<bg-size> [ , <bg-size> ]*  

取值

• length：用长度值指定背景图像大小。不允许负值。
• percentage：用百分比指定背景图像大小。不允许负值。
• auto：背景图像的真实大小。
• cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
• contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。