CSS3总结⼆：（background ）背景渐变⾊函数background-color(CSS2)background-image background-position background-size background-repeat background-attachment background-origin
background-clip
⼀、背景渐变⾊（取值单位-图像）
linear-gradient() ==》路径渐变
radial-gradient() ==》经向渐变
repeating-linear-gradient()==》 重复路径渐变
repeating-radial-gradient()==》
重复径向渐变
1.1这四个颜⾊渐变函数的兼容性都⼀样，先来看路径渐变linear-gradient()的⼏个个背景渐变⾊的⽰例：
⽰例的渐变⾊函数代码：
1 background-image: linear-gradient( #CD853F, #CD69C9);/* 默认⽅向⾃下向上 */
2 background-image: linear-gradient(to left,#CD853F, #CD69C9);/* ⾃右向左 */
3 background-image: linear-gradient(to left,#CD853F 50px, #CD69C9); /* ⾃右向左 起始颜⾊在50px 位置开始渐变 */
4 background-image: linear-gradient(to top left,#CD853F , #CD69C9);/* ⾃右下向左上渐变 */
5 background-image: linear-gradient(30deg , #CD853F , #CD69C9);/* 30度位置开始渐变 */
语法：linear-gradient(渐变⾓度，起始颜⾊ 起始渐变位置，结束颜⾊ 结束渐变的位置)；
渐变⾓度可以直接设置单⼀⽅向(left)，也可以设置复合⽅向(top left)，还可以设置度数(30deg)；起始
位置和结束位置除了⽰例中使⽤的像素位置还可以使⽤百分⽐。
1.2经向渐变radial-gradient()的渐变⽰例：
⽰例的渐变⾊函数代码：
1 /* 起始渐变⾊，结束渐变⾊ -- 其他所有值默认*/
2 background-image: radial-gradient( #ff0,#009);
3 /* 起始渐变⾊ 起始渐变位置(可以设置像素值百分⽐)，结束渐变⾊ 结束渐变位置*/
4 background-image: radial-gradient(#ff0 20px, #009 90px);
5 /* 扩散形状为圆形(默认椭圆ellip), 起始渐变⾊ 起始渐变位置, 结束渐变⾊ 结算渐变位置 */
6 background-image: radial-gradient(circle,#ff0 20px, #009 70px);
7 /* 扩散形状圆形 at 圆⼼位置在左上⾓(可以设置像素值百分⽐), 起始渐变⾊ 起始渐变位置, 结束渐变⾊ 结算渐变位置 */
8 background-image: radial-gradient(circle at top left,#ff0 0px, #009 230px);
9 /* 扩散形状圆形 半径⼤⼩(到最近的边) at 圆⼼位置在50px*² , 起始渐变⾊ 起始渐变位置, 结束渐变⾊ 结算渐变位置 */
10 background-image: radial-gradient(circle clost-side at 50px 50px,#ff0 20px, #009 70px);
11 /* 半径⼤⼩共有四个值分别是： */
12 clost-side ：半径距离从圆⼼到最近的边的距离
13 clost-corner ：半径距离从圆⼼到最近的⾓的距离
14 farthest-side ：半径距离从圆⼼到最远的边的距离
15 farthest-corner ：半径距离从圆⼼到最远的⾓的距离
1.3repeating-linear-gradient()在linear-gradient()基础上增加了重复平铺的效果：
语法：repeating-linear-gradient(渐变⽅向, 起始颜⾊ [这⾥可以设置从什么地⽅开始渐变，没有渐变的部分被结束渐变⾊填充，这部分宽度会被计⼊⼀组渐变⾊内(如果超出⼀组渐变⾊的宽度整个背景就变成了结束渐变⾊的纯⾊填充)]， 过渡颜⾊ [这⾥可以设置纯⾊的宽度]，结束颜⾊ ⼀组渐变⾊所占的宽度)
/* 被⼀组渐变⾊填充： ⾃上向下渐变，起始渐变⾊ 开始渐变的位置是top 5px ，中间过渡⾊，结束渐变⾊ */
background-image: repeating-linear-gradient(to bottom, #aff 5px, #FFC125 ,#FF1493);
/* ⾃右向左渐变，起始渐变⾊ 5像素后渐变，过渡⾊ 过渡⾊保持3像素纯⾊， 结束渐变⾊ 每组渐变⾊占20%宽度*/
background-image: repeating-linear-gradient(to left, #aff 5px, #FFC125 3px,#FF1493 20%);
1.4repeating-radial-gradient()的实现逻辑和repeating-linear-gradient()基本⼀致，⼀个采⽤宽度分组，⼀个采⽤半径分组。起始⾊的起始渐变都有基础渐变模式的其实⾊填充变成了重复平铺的结束渐变⾊填充，中间过渡⾊的起始渐变位置变成了中间渐变⾊的纯⾊宽度，结束渐变⾊的结束位置变成了每组渐变⾊的宽度。（重点解析：repeating-模式与普通渐变⾊的模式的区别）
/* 径向渐变的形状为圆形，起始渐变⾊ 从5像素位置开始填充起始⾊，中间过渡⾊ 中间过渡⾊的纯⾊宽度，结束渐变⾊ 每组渐变⾊的宽度为30% */
background-image:repeating-radial-gradient(circle,#ff0 5px,#ffc125 15px, #009 30%);
⼆、背景图⽚（URL 的使⽤）
background-image 多图⽚的盒模型渲染原理与实际开发应⽤：
以上⽰例的代码：
1 div {
2 width : 100px ;
3 height : 120px ;
英语九年级全一册4 }
5 .div1{
6 background-image : url('manQQ'),url('womanQQ');
7 background-size : 100px 120px ;/* 这⾥表⽰设置两个背景图⽚⼤⼩都是100px*120px */
8 }
9 .div2{
10 background-image : url('womanQQ'),url('manQQ');
11 background-size : 100px 120px,100px 120px ;
12 }
13 .div3{
地形单元14 background-image : url('manQQ'),url('womanQQ');
15 background-size : 500px 120px,50px 120px ;
16 background-position : 0px 0px ，50px 0px ;
17 background-repeat : no-repeat ;
18 }
19 .div4{
20 background-image : /*url('manQQ'),*/url('灰QQ');/* ⽤注释模拟加载失败 */
21 background-size : 100px 120px ；
教育改变命运22 }
根据上⾯四个⽰例的演⽰与盒模型来说：
1.background-image 多url 的渲染原理是盒模型的背景叠层渲染，按照rul 的引⼊顺序从上⾄下叠层。所以，demo1当设置背景图⽚⼤⼩都为元素⼤⼩时，只能看到第⼀张图⽚。demo2的样式设置印证了这⼀点。
2.bockground-repeat 的默认状态是repeat；所以即使设置background-size 的宽度为元素的⼀个半只能看到两个第⼀张图⽚的缩放效果，所以在demo3中将bockground-repeat 的值设置为no-repeat ，然后通过background-position 将两个背景图⽚定位到相应的位置就得到了最后的效果。
3.在实际开发应⽤中，background-image 更多的是为了增强体验，给元素⼀个像素较⼩的背景图放到主背景图后⾯，当⽹速较慢时较⼩的替代图⽚会先加载到页⾯，让页⾯看起来被正常渲染了。还有⼀种情况就是主图加载出错导致⽆法正确加载到页⾯，这时候替代图⽚也同样起到了增强体验的效果。（demo4）
三、背景图⽚（起始位置与结束位置、repeat的值设置注意事项）
background-origin
background-clip
3.1先来看引⽤图⽚背景，其他背景属性都为默认值时的效果：
从效果图上可以看到背景图⽚的起始位置是pading区域，但是border的top边框和left边框被反向填充了，这是由repead的重复填充形成的效果。因为repeat的默认值是repeat。background-origin的默认值是：padding-box;⽽background-clip的默认值是border-box；但是border-right 和border-bottom的区域是由内区域延申填充。
/* background的默认属性 */
background-origin: padding-box;
background-clip: border-box;
background-repeat: repeat;
3.2接着将background-clip(背景图⽚结束位置)设置为padding-box:
河北省教育考试院官网
当background-origin和background-clip的值都为padding-box时，border上就都没有了背景图⽚。
/* background的起始结束位置都为padding-box时 */
background-origin: padding-box;
background-clip: padding-box;
background-repeat: repeat;
3.3继续来看结束位置的变化影响，当起始位置为padding-box，⽽结束位置为content-box时的效果图：
由此可见background-origin的起始位置实质上是为background-position设定参考位置，⽽background-clip是设定实质可见背景区域(向外的部分被修剪)。
background-origin: padding-box;
background-clip: content-box;
background-repeat: repeat;
3.4最后说明⼀下background-repeat的属性值的设置⽅式：
background-repeat: repeat;/*同等于*/background-repeat: repeat-x repeat-y;/*但是实质上不能出现这种写法*/
background-repeat: repeat-x;/*同等于*/background-repeat: repeat-x no-repeat;/*但是实质上不能出现这种写法*/
background-repeat: repeat-y;/* 同等于*/background-repeat: no-repeat repeat-y;/*但是实质上不能出现这种写法*/
background-repeat: round;/*不能以整数次平铺时适度缩放背景图⽚*/background-repeat: round round;/*这两种写法⼀样*/
background-repeat: space;/* 不能整数平铺时均匀留⽩ */background-repeat: space space;/*这两种写法⼀样*/
90后特点background-repeat: round space;/* 表⽰不能整数次平铺时横向适度缩放纵向均匀留⽩*/轻狂少年
四、background-clip的text值的使⽤（webkit的专属属性）
background-clip的text表⽰使⽤⽂本裁剪图⽚，⽂字最终以裁剪的图⽚内容填充，但是这个属性值的
兼容性不是很好，pc端只有webkit浏览器兼容，移动端的浏览器兼容性还不错。由于考虑到浏览器的兼容，我只能提供代码和效果图，不能在富⽂本编辑中使⽤代码来实现这⼀效果：
1div{
2 position: absolute;
3 top: calc(50% - 50px);
4 left: calc(50% - 50px);
5 width: 600px;
6 font-size: 100px;
7 font-weight: 600;
8/* 实现效果的关键样式代码 */
感谢卡9 background-image: url('image/pic7.jpeg');
10 -webkit-background-clip: text;
11 -webkit-text-fill-color: transparent;
12 text-fill-color: transparent;
13 background-position: 0 0; /* 背景初始位置在0*0 */
14
玫瑰花有什么功效15/*定义⼀个动画效果*/
16 transition: all 0.6s;
17 }
18div:hover{
19 background-position: center center;/*⿏标进⼊背景横向纵向居中*/
20 }
View Code
五、background-attachment（当滚动时，背景图⽚相对谁定位）
fixed：背景图⽚相对于视⼝固定
scroll：背景图⽚相对于元素固定
local：背景图⽚相对于元素内容固定
先来看background-attachment的默认值scroll的效果图：
scroll固定在元素上的效果⽐较直观，接着来看local和fixed的效果图：
前⾯⼀个是local的效果，后⾯⼀个是fixed的效果。local相对内容固定，跟随内容滚动⽽滚动。fixed相对可视窗⼝固定，当可视窗⼝滚动时跟随滚动，但是当元素在窗⼝上不可见时背景图⽚还是会被渲染的叠层关系覆盖。
最后随便在这⾥看⼀下background-size的两个特殊值的效果：cover和contain。cover的效果是⽤⼀张图⽚将元素背景全部填充满，背景图⽚⽐例较⼤的那个⽅向会被切割⼀部分。contain的效果是⽤⼀种图⽚尽可能的填充元素的全部背景，背景图⽚⽐例较⼩的那个⽅向在元素上会出现留⽩。如果⽐例相同那两个效果都⼀样，都是刚好填充满元素。
