一、定义背景起点
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、径向渐变——纯色平铺(参考线性)