第七课-背景样式和圆角样式

第七课-背景样式和圆角样式

一、什么是背景样式

二、背景单例型样式先

（一）背景单例型样式之背景颜色（background-color）

（二）背景单例型样式之背景图片（background-image）

（三）背景单例型样式之背景层级

（四）背景单例型样式之背景平铺（background-repeat）

（五）背景单例型样式之背景大小（background-size）

（六）背景单例型样式之背景图片显示基点（background-origin）

（七）背景单例型样式之背景图片裁剪区域（background-clip）

（八）背景单例型样式之背景图片关联依附（ background-attachment ）

背景图片关联依附（background-attachment ）样式的作用就是，决定背景是在视口中固定的还是随包含它的区块滚动的。

fixed：
此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

scroll：
此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

三、背景复合型样式

（一）背景复合型样式写法

背景是复合属性:
background: color image repeat attachment position/size；
eg： background: red url(images/1.png) no-repeat scroll 20px 20px/30px 30px；
省略部分会被默认值替代,
position和size之间要用/分割

（二）overflow样式

四、多重背景设置