CSS 第四天 多重背景 变形 过渡

背景原点：
background-origin 图片起始位置 border-box包括边框 padding-box边框内

content-box 内容内

**background-repeat 为no-repeat才有效

背景显示区域
background-clip 超过部分被裁剪,属性同上

背景尺寸
background-size 设置背景大小，auto原图片大小，可以是数值或百分比（

表示长宽） cover缩放至能覆盖整个容器 contain缩放至某一边能覆盖容器

**多重背景格式
background:背景色 背景图 背景位置/尺寸 平铺方式 attachment 原点 显示区

域

**背景色只能存在一个，所以当我们要设置多个背景图又要加上背景色时，建议
背景色放在最后一个写，避免被覆盖，例如：

background:url(1.jpg) center center/100px 100px no-repeat content-
box;
background:url(2.jpg) center center/100px 100px no-repeat content-
box;
background:url(3.jpg) center center/100px 100px no-repeat content-box
#cccccc;

　　

*上面三组background可以写在一起，用逗号隔开

变形
transform:function(); translate()/translateX()/translateY() 2D平移

rotate() 2D旋转 scale()2D缩放 skew()斜切扭曲 translate3d() 3D位移

变形方法非常多，建议有兴趣可以去手册查看并亲自做出效果
例如，鼠标悬停时放大1.1倍：

div:hover{transform:scale(1.1,1.1);}

　　

过渡动画
过渡属性：transition-property 例如background-color width height等 带

有数值的属性基本都支持过渡动画，也可以用all表示全部
过渡时间：transition-duration 过渡这个过程所用的时间
过渡函数：transition-timing-function 主要是对过渡速度的描述 默认：

ease 逐渐变慢 linear：匀速 ease-in：加速 ease-out:减速 ease-in-out：

先加速再减速 cubic-bezer(n,n,n.n):自定义
过渡延迟：transition-delay 过渡开始前的延迟时间

过渡缩写：transition:过渡属性 过渡时间 过渡函数 过渡延迟；
例如，下面过渡动画：

transition-property:all;
transition-duration:.5s;
transition-timing-function:ease-in;
transition-delay:.1s;

　　

可以缩写为：

transition:all .5s ease-in .1s;