html5--6-41 CSS背景

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 背景图像相对于内容框来定位。