背景
背景颜色
⋅
\cdot
⋅ background-color
背景图片
⋅
\cdot
⋅ background-image
⋅
\cdot
⋅ 用 url() 引入图片路径;
⋅
\cdot
⋅ 可以同时设置背景颜色和背景图片;
⋅
\cdot
⋅ 如果背景图片小于元素,则背景图片会自动平铺把元素铺满;
⋅
\cdot
⋅ 如果背景图片大于元素,那么背景图片无法完全显示;
⋅
\cdot
⋅ 如果背景图片和元素一样大,那么一切都刚刚好。
背景重复方式
⋅
\cdot
⋅ background-repeat
⋅
\cdot
⋅ 可选值:
\;
repeat
:默认值,沿着x和y双方向重复;
\;
repeat-x
:沿 x 轴方向重复;
\;
repeat-y
:沿 y 轴方向重复;
\;
no-repeat
:不重复;
背景图片位置
⋅
\cdot
⋅ background-position
⋅
\cdot
⋅ 可选值:top,left,right,bottom,center
;必须同时指定水平和垂直方向的两个值,不写的话默认center;
⋅
\cdot
⋅ 也可以通过偏移量指定背景图片的位置:background-position: 10px 10px;
背景范围
⋅
\cdot
⋅ background-clip
⋅
\cdot
⋅ 可选值:
\;
border-box
:默认值,背景会出现在边框下面;
\;
padding-box
:背景不会出现在边框下面,只出现在内容区和内边距下面;
\;
content-box
:背景只出现在内容区下面;
背景图片的偏移量的计算原点
⋅
\cdot
⋅ background-origin
⋅
\cdot
⋅ 可选值:
\;
padding-box
:默认值,从内边距左上角开始计算;
\;
content-box
:从内容区左上角开始计算;
\;
border-box
:从边框左上角开始计算;
背景图片的尺寸
⋅
\cdot
⋅ background-size
⋅
\cdot
⋅ 可选值:
\;
两个数字
:第一个值是宽度,第二个值是高度;如果只写一个值,那么第二个值默认 auto,根据第一个值等比例缩放;
\;
cover
:图片比例不变,将元素铺满;
\;
contain
:图片比例不变,在元素中完整显示;
背景图片是否跟随元素移动
⋅
\cdot
⋅ background-attachment
⋅
\cdot
⋅ 可选值:
\;
scroll
:默认值,背景跟随元素移动;
\;
fixed
:背景固定在页面中,不随元素移动;
.back{
width: 506px;
height: 506px;
background-color: rgb(245, 234, 244);
background-image: url("../imgs/ssm_2.jpg");
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center center;
}
<body>
<div class="back"></div>
</body>
简写属性 background
没有顺序要求,但是不熟悉时别用;备注:
⋅
\cdot
⋅ background-size
必须写在 background-position
后面,并且用/隔开:background-position/background-size
;
⋅
\cdot
⋅ background-origin
必须写在 background-clip
前面;
雪碧图
解决图片闪烁问题:将多个小图片保存到一个大图片中,然后通过调整 background-position 来显示图片的不同部分,这样图片就可以同时加载到网页中,有效避免闪烁问题。这项技术在网页中应用十分广泛,被称为 CCS-Sprite,这种图被称为雪碧图。
使用步骤
- 确定要使用的图标;
- 测量图标大小;
- 根据测量结果创建一个元素;
- 将雪碧图设置为背景图片;
- 设置一个偏移量以显示正确的图片;
特点:一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户体验。
渐变
设置复杂的背景颜色,实现从一个颜色向其他颜色过渡的效果。
渐变是图片,需要通过 background-image 来设置。
线性渐变
⋅
\cdot
⋅ linear-gradient()
,颜色沿一条直线发生变化,颜色写几种都行,颜色默认平均分配;
⋅
\cdot
⋅ 可以指定方向:to left, to right, to top, to bottom;
⋅
\cdot
⋅ 也可以用旋转角度指定方向:xxxdeg
,deg表示度数;
⋅
\cdot
⋅ 可以手动指定渐变的分布情况,颜色后面跟上位置:linear-gradient(rgb(252, 235, 249) 50px, rgb(215, 136, 227) 70px)
;
⋅
\cdot
⋅ repeating-linear-gradient()
,可以平铺的线性渐变,颜色后面跟上位置时,渐变范围只限制在这个范围内,然后平铺这段范围里的渐变,填满整个元素;此时background-repeat:no-repeat
不起作用。
.back{
float: left;
width: 506px;
height: 506px;
background-image: url("../imgs/ssm_2.jpg");
background-size: 50% 50%;
background-repeat: no-repeat;
background-position: center center;
}
.background{
width: 506px;
height: 506px;
background-image: linear-gradient(to right, rgb(252, 235, 249), rgb(215, 136, 227));
/* background-image: linear-gradient(90deg, rgb(252, 235, 249), rgb(215, 136, 227)); */
}
<body>
<div class="back"></div>
<div class="background"></div>
</body>
径向渐变(放射)
⋅
\cdot
⋅ radial-gradient()
⋅
\cdot
⋅ 默认情况下,径向渐变的形状根据元素的形状来计算,比如正方形元素对应圆形渐变,矩形元素对应椭圆形渐变;
⋅
\cdot
⋅ 可以手动指定径向渐变中心的大小:radial-gradient(渐变宽度 渐变高度, 颜色 位置,颜色 位置,...)
;
⋅
\cdot
⋅ 或者用 circle 和 ellipse 指定形状;
⋅
\cdot
⋅ 也可以手动指定渐变位置radial-gradient(渐变宽度 渐变高度 at 宽度位置 高度位置, 颜色 位置,颜色 位置,...)
;
.background{
width: 506px;
height: 506px;
background-image: radial-gradient(300px 500px, rgb(252, 235, 249), rgb(215, 136, 227), rgb(252, 235, 249));
}