background新增的N个强悍功能！！！

background新增的N个强悍功能：

• 首先我们先回顾下background的原有样式：

background-color 背景颜色

- 相关属性值：
    - 关键字：red,blue,yellow等具体的颜色单词；
    - 十六进制： 0-9，a-f，以“#”开头的6位十六进制数值表示一种颜色，如#f3e1d2;
    - rgb： 分别代表red,green,blue,取值范围是0-255，如rgb(102,35,210);

background-image 背景图片

-  通过url引入图片链接地址；
-  本地相对路径地址——url(img/img.jpg)；
-  网络绝对路径地址——url(http://imgsrc.baidu.com/forum/pic/item/3812b31bb051f819ca6789eadab44aed2f73e7d4.jpg)；附上一张16进制图片列表，有兴趣的朋友可以点开看下；

background-repeat 背景平铺

- no-repeat 不平铺；
- repeat-x 沿着x轴水平平铺；
- repeat-y 沿着y轴垂直平铺；
- repeat 默认值，x轴、y轴都平铺；

background-position 背景定位

- 具体数值： （可以是正值也可以是负值）
    - x方向(默认是0）
        - 正值从左向右移动，负值从右向左移动；
    - y方向(默认是0)
        - 正值从上向下移动，负值从下向上移动；
- 百分比：
    - 图的百分之N，对齐元素的百分之N；
- 关键字：
    - x方向(默认left)
        - left（图的左侧和元素左侧对齐）
        - center （图的中间和中间左侧对齐）
        - right （图的右侧和中间右侧对齐）
    - y方向(默认top)
        - top （图的顶部和元素顶部对齐）
        - center （图的中间和中间左侧对齐）
        - bottom （图的底部和元素底部对齐）

background-attachment 背景图滚动

- 相关属性值
    - scroll 默认值，背景图随之滚动条移动；
    - fixed 背景图固定，不随滚动条移动；此时坐标根据整个可视区计算；

background在CSS3中新增样式：

background-clip 背景裁切

• 决定元素的背景显示在元素的哪个区域里
• 具体数值：
  • border-box
    • （默认值）元素背景显示在border及border以内；
  • padding-box
    • 元素背景显示在padding及padding以内；
  • content-box
    • 只有content区域显示元素背景；
  • -webkit-text 只有文字区域显示元素背景；
    • 是weikit内核浏览器的私有样式，只在webkit内核下支持，如chrome，Safari；
    • 新版本的webkit内核已经不支持此样式，需要写成-webkit-background-clip: text；
• [ ]举例

#box {
	width: 300px;
	height: 300px;
	border: 50px solid rgba(0, 0, 0, .3);
	padding: 50px;
	background: url(img/timg.jpg);
	background-clip: content-box;
	-webkit-background-clip: text；
}

background-origin 背景原点设置

• 背景的原点默认是在元素padding区域的左上角,即background-position：left top；
• 相关属性值
  • border-box
    • 背景原点从元素border的左上角开始计算；
  • padding-box
    • 背景原点从元素padding的左上角开始计算；
  • content-box
    • 背景原点从元素content的左上角开始计算；
• [ ] 举例

#box {
	width: 300px;
	height: 300px;
	border: 50px solid rgba(0, 0, 0, .3);
	padding: 50px;
	background: url(img/timg.jpg) content-box content-box;
	/*background-clip: content-box;
	background-origin: content-box;*/
	/*复合样式可以写到一条里面，并且，同时有两个值时，默认第一个是origin，第二个是clip；*/
}

background-size 背景图尺寸设置

• 语法：
  • background-size： 图片宽度 图片高度；
• 值的类型：
  • 具体数值： px;
  • 百分比：
    • 宽度百分比，根据元素宽度计算；
    • 高度百分比，根据元素高度计算；
  • 关键字：
    • cover 覆盖
      • 优先铺满整个元素，等比缩放图片，但图片可能显示不全；
    • contain 包含
      • 优先显示完整图片，等比缩放图片，但可能铺不满整个元素；
    • auto 自动
      • 设置宽度，高度auto时，高度随着宽度等比缩放；
      • 设置高度，宽度auto时，宽度随着高度等比缩放；
• [ ] 举例

#box {
		width: 300px;
		height: 400px;
		border: 1px solid #000;
		overflow: auto;
		resize: both;
		background: url(img/timg.jpg) no-repeat;
		/* background-size: 200px 100px; */
		/* background-size: contain; */
		background-size: 200px auto;
	}

多背景图设置

• 在CSS3中支持给同一个元素，添加多张背景图；
• 每张背景图之间，需要用“，”隔开；
• 先写的背景图显示在上边，后加的显示在下边；
• 多背景图时，如果还要添加背景颜色，要把背景颜色加在最后面；
• [ ] 举例

#box {
	width: 700px;
	height: 200px;
	border: 100px solid rgba(0, 0, 0, 0);
	padding: 100px;
	background: url(img/timg.jpg) no-repeat padding-box, url(img/timg1.jpg) no-repeat border-box padding-box;
}

linear-gradient 线性渐变

• 渐变颜色设置，或者说过渡点,每个点之间用","隔开 linear-gradient(red,blue,yellow)
• 过渡点的位置设置
  • 百分比
  • 具体数值
  • 当两个颜色的过渡点位置是重叠的，颜色和颜色之间就没有过渡，而是直接跳转；
• 渐变方向设置
  • 关键字设置起点(需要加各个浏览器的前缀之后，才能被识别)
• [ ] 举例

#box {
	width: 300px;
	height: 400px;
	border: 2px solid #000;
	/* background: linear-gradient(red 0%,blue 10%,yellow 30%); */
	background: -webkit-linear-gradient(left top,red 0,blue 20%,yellow 50%);
	background: -moz-linear-gradient(left top,red 0,blue 20%,yellow 50%);
	background: -ms-linear-gradient(left top,red 0,blue 20%,yellow 50%);
	background: linear-gradient(left top,red 0,blue 20%,yellow 50%);
}

• 角度设置

  • 0deg从下向上渐变；
  • 默认从上向下渐变；
  • 角度增加为顺时针旋转；

• repeating-linear-gradient 重复线性渐变

• [ ] 举例

#box {
	width: 300px;
	height: 100px;
	border: 2px solid #000;
	background: repeating-linear-gradient(90deg, red 0,red 10px,blue 10px, blue 20px, rgba(0, 0, 0, 0) 20px,rgba(0, 0, 0, 0) 30px);
}

• 渐变属性 background-image

radial-gradient 径向渐变

• 渐变颜色设置，或者说过渡点,每个点之间用","隔开
• 过渡点的位置设置
  • 百分比<radial-gradient(red 10%, blue 30%);>
  • 具体数值
  • 当两个颜色的过渡点位置是重叠的，颜色和颜色之间就没有过渡，而是直接跳转
• [ ] 举例

#box {
	width: 300px;
	height: 300px;
	border: 2px solid #000;
	background: radial-gradient(closest-side,blue 10%,red 10%, red 95%,blue 95%);
}

• 大小设置
  • 具体数值，火狐老版本不支持,以及加了前缀moz依然不支持
  • 最近端，最近角，最远端，最远角，包含或覆盖 closest-side, closest-corner, farthest-side, farthest-corner, contain or cover
• 形状设置 ellipse||circle
  • 形状设置和大小只能同时设置一个
• 圆心点设置
  • 必须加前缀才可以设置
  • 关键字
  • 具体数值
• [ ] 举例

#box {
	width: 300px;
	height: 400px;
	border: 2px solid #000;
	background: -webkit-radial-gradient(10px 100px,farthest-corner, red,blue);
	background: -moz-radial-gradient(10px 100px,farthest-corner, red,blue);
	background: -ms-radial-gradient(10px 100px,farthest-corner, red,blue);
}

• repeating-radial-gradient 重复径向渐变
• [ ] 举例

#box {
	width: 300px;
	height: 300px;
	border: 2px solid #000；
	background: repeating-radial-gradient(blue 30px,red 60px,red,90px,blue 90px);
}

以上是background在css3中的新增样式，这些列举的是比较常用的，在实际工作中经常用到，希望对大家有所帮助！