从零开始学习前端开发 — 17、CSS3背景与渐变

一、css3背景切割： background-clip:border-box|padding-box|content-box;

作用： 用来设置背景的可见区域

a) border-box 默认值，背景在边框及边框以内的区域可见

b) padding-box 背景在padding及padding以内的区域可见

c) content-box 背景在content区域可见

---

二、背景原点: background-origin:padding-box|border-box|content-box;

作用：background-origin用来设置背景图像的定位区域

a) padding-box 默认值，背景原点在padding区域

b) border-box 背景原点在border区域

c) content-box 背景原点在content区域

三、背景切割&背景原点：background-clip和background-origin结合使用

background-origin:content-box;

background-clip:padding-box;

背景原点在content区域，背景在padding以内的区域可见

---

四、背景图尺寸：background-size:值;

1) length

可以设置背景图的宽度和高度，第一个值代表宽度，第二个值代表高度，如果省略第二个值，默认为auto，等比例缩放

eg: background-size:500px 300px; (背景图有可能会发生变形)

background-size:500px; (背景图等比例缩放)

2) 百分比

可以以父元素容器的百分比来设置背景图的尺寸，第一个值代表宽度，第二个值代表高度，如果省略第二个值，默认为auto

eg: background-size:100% 100%; (背景图有可能会发生变形)

3) cover

把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像有可能超出容器,背景图像不会发生变形

4) contain

把图像扩展至最大尺寸，以使宽度和高度 完全适应内容区域。背景图像始终被包含在容器内,
背景图不会发生变形

---

五、设置透明背景： background:rgba(r,g,b,a); a代表透明度

eg: background:rgba(0,0,0,.4);

注：rgba和opacity的区别：

设置rgba背景带有一定的透明度，容器中的文字和图片不会跟随透明

设置opacity是给整个容器添加一定的透明度，文字和图片也会透明

---

六、颜色模式： background:hsla(h,s,l,a);

h: 色调，取值范围0~360

s: 饱和度，取值范围 0%~100%

l: 亮度，取值范围0%~100%

a: 透明度，取值范围0~1

---

七、线性渐变： background:linear-gradient(方向,颜色值 位置,颜色值 位置);

eg: background:linear-gradient(to right,red 0%,yellow 30%,green 35%);

注：重复线性渐变

eg: background:repeating-linear-gradient(red 0%,yellow 10%,green 20%);

设置重复线性渐变时，一定要自定义线性渐变的位置

---

八、径向渐变： background:-webkit-radial-gradient(中心点位置,形状 渐变半径,颜色 位置,颜色 位置);

eg: background:-webkit-radial-gradient(10% 80%,circle closest-corner,red 0%,yellow 15%,green 25%);

注：渐变半径可选参数值：

a) closest-corner 圆心到离圆心最近的角

b) closest-side 圆心到离圆心最近的边

c) farthest-corner 圆心到离圆心最远的角

d) farthest-side 圆心到离圆心最远的边

注：重复径向渐变

eg: background:-webkit-repeating-radial-gradient(red 0%,yellow 5%,green 10%);

---

扩展：

1.添加蒙版

语法：-webkit-mask-image:url(蒙版图片路径)|使用渐变作为蒙版;

-webkit-mask-repeat:no-repeat|repeat-x|repeat-y|repeat;

-webkit-mask-position:left center;

2.设置背景可视区域为文字区域

语法： -webkit-background-clip:text;

注：设置此属性，文字颜色需要设置为透明（即color:transparent）

3.倒影：-webkit-box-reflect:倒影方向 偏移量 倒影渐变;

a) 倒影方向 left|right|above(上)|below(下)

b) 偏移量