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

发表评论

电子邮件地址不会被公开。必填项已用 * 标注