html5--6-41 CSS背景
实例
学习要点
- 掌握CSS背景属性的使用
元素的背景属性：
- background 简写属性，作用是将背景属性设置在一个声明中。
- background-attachment 背景图像是否固定或者随着页面的其余部分滚动。scroll 默认值。/fixed 当页面的其余部分滚动时，背景图像不会移动。
- background-color 设置元素的背景颜色。
- background-image 把图像设置为背景。
- background-position 设置背景图像的起始位置。
- left/right/center/bottom/top这几个属性值可以两两组合使用，如果只规定了一个关键词，那么第二个值将是"center"。
- x% y% 第一个值是水平位置，第二个值是垂直位置;左上角是 0% 0%。右下角是 100% 100%;如果仅规定了一个值，另一个值将是 50%。
- x y 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果仅规定了一个值，另一个值将是50%。
- background-repeat 设置背景图像是否及如何重复。repeat/repeat-x/repeat-y/no-repeat
CSS3新增的背景属性：
- background-size 规定背景图片的尺寸。
- 像素/百分比设置宽高
- cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
- contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
- background-clip 规定背景的绘制区域。
- border-box 背景被裁剪到边框盒
- padding-box 背景被裁剪到内边距框。
- content-box 背景被裁剪到内容框。
- background-origin 规定背景图片的定位区域。
- padding-box 背景图像相对于内边距框来定位。
- border-box 背景图像相对于边框盒来定位。
- content-box 背景图像相对于内容框来定位。