【css】background笔记

之前笔试题有一道选择题是关于background属性的，后来查阅资料才发现background有各种子属性，特写此文章整理一下。

浏览器兼容性支持

PC端：

移动端：

background属性

【盒模型】

• background-image

  定义背景图像。

• background-color

  定义背景颜色。

• background-origin【css3新增】

  指定背景的显示区域。默认情况下，总是以元素左上角为坐标原点进行背景图像定位。
  值：border-box | padding-box | content-box

  • border-box 从边框区域开始显示背景,背景会延伸到外边界的边框，但边框在上，背景在下。

  • padding-box 从补白区域开始显示背景，背景延伸到最外边界的padding，边框不会有背景出现。

  • content-box 仅在内容区显示背景

• background-clip【css3新增】

  指定背景的裁剪区域。
  值：border-box | padding-box | content-box
  【看栗子】
  #mydiv{ padding: 25px; border: 10px dotted #000; background-color:yellow; }

  • border-box 背景会延伸到外边界的边框，但边框在上，背景在下。
    

  • padding-box 从补白区域开始显示背景，背景延伸到最外边界的padding，边框不会有背景出现。
    

  • content-box 仅在内容区显示背景
    

• background-repeat

  设置背景图像是否及如何重复铺排
  / 单值语法 /
  background-repeat: repeat-x;//相当于 repeat no-repeat
  background-repeat: repeat-y;
  background-repeat: repeat;
  background-repeat: space;
  background-repeat: round;
  background-repeat: no-repeat;

  / 双值语法: 水平horizontal | 垂直vertical /
  background-repeat: repeat space;
  background-repeat: repeat repeat;
  background-repeat: round space;
  background-repeat: no-repeat round;

  background-repeat: inherit;

  • repeat
    图像会按需重复来覆盖整个背景图片所在的区域. 如果大小不合适，最后一个图像会被裁剪,

  • space 【当前没有广泛支持】
    图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.

  • round 【当前没有广泛支持】
    随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.关键是浏览器怎么计算什么时候应该添加一个图像进来, 而不是继续伸展.

  • no-repeat
    图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由background-position属性来决定.

  

• background-size【css3新增】

  定义背景图片大小
  / 关键字 /
  background-size: cover //缩放背景图片以完全覆盖背景区，可能背景图片部分看不见
  background-size: contain //缩放背景图片以完全装入背景区，可能背景区部分空白

  / 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto /
  background-size: 50% //相对背景区【由background-origin设置】的百分比
  background-size: 3em
  background-size: 12px
  background-size: auto //以背景图片的比例缩放背景图片

  / 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 /
  background-size: 50% auto
  background-size: 3em 25%
  background-size: auto 6px
  background-size: auto auto

  / 逗号分隔的多个值：设置多重背景 /
  background-size: auto, auto / 不同于background-size: auto auto /
  background-size: 50%, 25%, 25%
  background-size: 6px, auto, contain

  background-size: inherit
  可以看MDN提供的例子

• background-position

  设置背景图像的位置
  background-position: top;
  background-position: bottom;
  background-position: left;
  background-position: right;
  background-position: center;
  background-position: 25% 75%;
  background-position: 0px 0px, center;

  

• background-attachment

  定义背景图像的显示方式。
  background-attachment: scroll;
  background-attachment: fixed;
  background-attachment: local;

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

  • local
    此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

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

【background-origin vs background-clip】

background-clip用来判断背景是否包含边框区域.
background-origin是用来决定background-position定位的参考位置。