12.（初级）CSS背景background

一、定义背景起点

background-origin:border-box/padding-box（默认）/content-box;

border-box：起点设置为border左上角

padding-box：起点设置为padding左上角

content-box：起点设置为content左上角

例如：注意黑点

 

二、定义背景显示区域

background-clip:border-box（默认）/padding-box/content-box;

例如：注意边框

由于background-origin:padding-box（默认），所以background-clip:border-box效果类似background-origin:padding-box

三、缩放背景图

background-size:px/%/contain/cover;

例如：

background-size: 100% auto;可以随浏览器大小，改变背景图的尺寸

 

background-size: 100% 100%;使图像布满，修改图像纵横比

 

background-size: contain;根据元素背景尺寸强制修改图像尺寸，不修改图像纵横比

 

background-size: cover;强制让图片的width或height适应元素，不修改图像纵横比

 

四、使用多个背景图（IE8不支持）

background:url(top.jpg) center top no-repeat,

                       url(middle.jpg) center top repeat-y,

                       url(bottom.jpg) center bottom no-repeat;

五、使用渐变背景

1、线性渐变

linear-gradient(deg/to 关键字,颜色值 位置值,颜色值 位置值,.....)

关键字：top/right/bottom/left。

        deg（角度按顺时针旋转）:0deg相当于to top，90deg相当于to right，180deg相当于to bottom，270deg相当于to left。

位置值：表示颜色值到此位置值为止。

例如：

background-color:#FC0;

background-image:linear-gradient(to right,#900 20%,#FC0 30%,#FC0 70%,#900 80%);

说明：

background-color:#FC0：由于IE9及之前版本不支持渐变，故采用此后备方案

to right：渐变从左向右

#900 20%：颜色值（#900）在位置值（0~20%）——浏览器默认从0开始，故无需设置0%

#900 20%,#FC0 30%：位置20%到30%，从#900过渡到#FC0

#FC0 30%,#FC0 70%：位置30%到70%，颜色值#FC0

2、线性渐变——纯色平铺

background-image:

repeating-linear-gradient(45deg,#900 0,#900 10px,#FC0 10px,#FC0 20px);

3、径向渐变

background-image:

radial-gradient(closest-side/closest-corner/farthest-side/farthest-corner ellipse/circle at位置值 位置值..., 颜色值,颜色值,...);

说明：

closest-side：从位置值呈圆形扩散至元素最近边。

closest-corner：从位置值呈圆形扩散至元素最近顶角。

farthest-side：从位置值呈圆形扩散至元素最远边。

farthest-corner：从位置值呈圆形扩散至元素最远顶角。

ellipse（默认，可不设置）:根据元素形状向外扩散，元素正方形则为圆形，长方形则为椭圆。

circle：根据元素形状呈圆形向外扩散。

位置值：从位置值开始渐变，不设置时从元素中心开始渐变。

例如：
background-image: radial-gradient(red,blue);

background-image: radial-gradient(circle,red,blue);

background-image: radial-gradient(circle at 20% 40%,red,blue);

background-image: radial-gradient(closest-side circle at 20% 40%,red,blue);

background-image: radial-gradient(closest-corner circle at 20% 40%,red,blue);

background-image: radial-gradient(farthest-side circle at 20% 40%,red,blue);

background-image: radial-gradient(farthest-corner circle at 20% 40%,red,blue);

 

3、径向渐变——纯色平铺（参考线性）