CSS学习（五）—— 背景与渐变、2D与3D的转换

八、背景与渐变

1、背景基础知识

1） 背景颜色基础知识

background-color 属性表示背景颜色，颜色可以用十六进制、rgb（）、rgba（）表示法进行表示

注：padding区域是由背景颜色的

2）背景图片基础知识

background-image属性用来设置背景图片，图片路径写到url()圆括号中，可以是相对路径，也可以是http://开头的绝对路径，如background-image:url(images/bg1.jpg);

若样式表外链，则要书写从CSS出发到图片的路径而不是从HTML出发

2、背景图片高级属性

1）背景图片的重复模式

background-repeat 属性用来设置背景的重复模式

值	意义
repeat;	x、y均平铺（默认）
repeat-x;	x平铺
repeat-y;	y平铺
no-repeat;	不平铺

2）背景尺寸

background-size 属性用来设置背景图片的石村，兼容到IE9

background-size:100px 200px;/* 参数：宽度 高度 */

值也可以用百分比来设置，表示为盒子宽、高的百分之多少；需要等比例设置的值，写auto

contain、cover是两个特殊的background-size的值；contain表示将背景图片智能改变尺寸以整个容纳到盒子里；cover表示将背景图片智能改变尺寸以撑满盒子，让盒子不留白。（两个值都不改变原图的长宽比例）

3）背景裁切

backgroung-clip 属性用来设置元素的背景裁切到那个盒子，兼容至IE9

值	意义
border-box	背景延伸至边框（默认）
padding-box	背景延伸至内边（padding），不会绘制到边框处（仅在dashed、dotted边框可察觉）
content-box	背景被剪裁至内容区

4）背景固定

background-attachment 属性决定背景图像的位置是在视口内固定，或者随着包含他的区块移动。

（注：此处的变化不变化是相对于原来的在窗口中的位置来说，譬如：原来图片在页面中央，滚动滚轮后图片到了页面上方，这便是发生了滚动）

值	意义
fixed	自己滚动条不动，外部滚动条不动（图片位置固定，不随视口、窗口变化而变化）
local	自己滚动条动，外部滚动条动（图片位置不固定，视口、窗口变化，图片也跟着变化）
scroll	自己滚动条不懂，外部滚动条动（默认）（图片位置不固定，视口变化背景不动，窗口变化背景改变）

5）背景图片位置

background-position 属性可以设置背景图片出现在盒子的什么位置。

background-position:100px 200px; /* 背景图片左上角的位置在距左边100px，距上边200px的位置上 */

也可以使用top、bottom、center、left、right描述图片出现的位置

background-position:top right; /* 图片出现在右上角 */
background-position:center center; /* 图片出现在正中间 */
background-position：right;/* 若只有一个参数，第二个数默认为center */

6）CSS精灵

CSS精灵：将多个小图标合并制作在一张图上，使用background-position属性单独显示其中一个。该技术就叫CSS精灵，也叫CSS雪碧图。

因为图片很长，所以一般显示左上角的小图标，故需要更改图片的位置，通过left:-xxx; top:-xxx; 来实现定位到精灵图的某个图标处

优点：可以减少HTTP请求次数，加快网页显示速度。

缺点：不方便测量，后期改动麻烦

7）background综合属性

一些常用的背景相关小属性，可以合写到一条属性当中。

background:white url() no-repeat center center;参数分别为：背景颜色、背景图片、背景重复、背景位置

3、渐变背景

1）线性渐变

盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景。

background-image:linear-gradient(right,blue,red); 参数分别表示渐变开始的方向、开始颜色、结束颜色

渐变方向也可以写成度数的形式，如45deg，即45度方向

可以有多个颜色值，并且可以用百分数定义他们出现的位置background-image:linear-gradient(to right,blue,yellow 20%,red);

颜色的形式可以为任意

★浏览器私有前缀（记）

不同浏览器有不同的私有前缀，用来对实验性质的CSS属性加以标识。

品牌	前缀
Chrome	-webkit-
Firefox	-moz
IE、Edge	-ms-
欧朋	-o-

2）径向渐变

盒子的background-image属性可以用radial-gradient()形式创建径向渐变背景。

background-image:radial-gradient(50% 50%,red,blue); 参数分别为圆心坐标，开始颜色，结束颜色

九、2D与3D转换

1、2D变形

1）旋转变形

将transform 属性值设置为rotate()，即可实现旋转变形

transform:rotate(45deg); 括号中为旋转角度，角度为正数则顺时针方向旋转，否则就逆时针

可以使用transform-origin 属性设置自己的自定义变换原点

transform-origin:0 0; 即将旋转原点设置为左上角一点

2）缩放变形

将transform 属性的值设置为scale() ，即可实现缩放变形

transform:scale(3); 括号中为缩放倍数（无单位），当数值小于一时表示缩小元素，大于一时表示放大元素

参数也可以为两个，如 transform:scale(.3,.2);此时第一个参数表示缩放宽度，第二个参数表示缩放高度

3）斜切变形

将transform 属性的值设置为skew() ，即可实现斜切变形

transform:skew(10deg,20deg); 括号中分别为x斜切角度，y斜切角度

transform: skew(<angle> [, <angle>])（备注：中括号包裹的参数表示可选参数），其中angle为倾斜角度，角度方向跟随极坐标角度方向，逆时针为正方向，顺时针为负方向。当只有一个参数的时候，第二个参数默认为0deg

4）位移变形

将transform 属性的值设置为translate() ，即可实现位移变形，兼容至IE9

transform:translate(100px,200px); 两个参数分别为向右移动，向下移动

和相对定位非常像，位移变形也会老家留坑，形影分离

2、3D变形

1）3D旋转

将transform 属性的值设置为rotateX() 或者rotateY()，即可实现绕横轴、纵轴旋转

transform:rotateX(20deg) rotateY(40deg);

X轴方向角度为正时，物体向后仰；Y轴方向为正时，物体右边向前

perspective属性用来定义透视强度，可以理解为“人眼到舞台的距离”，单位是px，舞台必须设置该属性！

<div>  /* 舞台，必须设置perspective属性 */
	<p></p>   /* 演员，必须设置transform属性 */
</div>

rotate()可以理解为rotateZ()

2）空间移动

当元素3D旋转之后，即可继续添加translateX()、translateY()、translateZ() 属性让元素在空间进行移动

一定要在3D旋转之后才能进行空间移动

这里的XYZ指的是物体旋转完之后的平面的XYZ轴；不同于平面移动

注：若要将上述属性同时实现则需将这些值卸载同一个transform下的参数，如：transform:scale(.5) rotate(30deg);

若分开写则会导致上面写的失效，只有最下面那条生效