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