背景
background-color
背景颜色
background-image
背景图片
如果背景图片和元素一样大,则背景图片正常显示;
如果背景图片小于元素,则图片会在元素中平铺;
如果背景图片小于元素,则有部分背景图片无法显示;
background-repead
背景的重复方式
可选值 | |
---|---|
repeat | 默认值,背景会沿x、y双方向重复 |
repeat-x | 背景仅沿x方向重复 |
repeat-y | 背景仅沿y方向重复 |
no-repeat | 背景图片不重复 |
background-position
背景图片位置
设置方式:
通过top、left、right、bottom、center;
使用方位必须同时指定两个值,如果只写一个则第二个默认就是center;
通过偏移量来指定背景图片的位置
水平方向的偏移量,垂直方向的偏移量;
background-clip
背景范围
可选值 | |
---|---|
border-box | 默认值,背景会出现在边框的下边和内边距 |
padding-box | 背景不会出现在边距,只会出现在内容区 |
center-box | 背景只出现在内容区 |
background-origin
背景偏移量的计算原点
可选值 | |
---|---|
padding-box | 默认值,background-position从内边距开始出现 |
center-box | 背景图片的偏移量从内容去处计算 |
border-box | 背景图片的偏移量从边框处计算 |
background-size
背景图片的大小
第一个值表示宽度,第二个值表示高度;如果只写一个值则第二个值默认是auto;
可选值 | |
---|---|
cover | 图片的比例不变,将元素铺满 |
contain | 图片的比例不变,将图片在元素中完整的展示 |
background-attachment
背景图片是否跟随元素移动
可选值 | |
---|---|
fixed | 背景会固定在页面中,不会跟随元素移动 |
scoroll | 默认值,背景图片会跟随元素移动 |
background
背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置,没有顺序要求,也没有属性是必须写的;
注意:
1、background-size必须写在background-position的后边并且使用 / ;
2、background-origin background-clip 这两个样式,orgin要在clip的前边;
解决背景闪烁问题
可以将多个小图片保存到一个大图片中,然后通过调整background-position来响应相应的图片,这样图片会自动加载到网页中,就可以避免出现图片闪烁问题;
这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为雪碧图;
雪碧图使用步骤:
-
先确定要使用的图标;
-
测量要使用的图标的大小;
-
根据测量结果创建一个元素;
-
将雪碧图设置为元素的背景图片;
-
设置一个偏移量以显示是正确的图片;
雪碧图特点:
一次性将多个图片加载进页面,降低请求的次数加快访问速度,提高用户体验;
背景渐变
通过渐变可以设置一些复杂的背景颜色,可以实现从一个颜色向其他元素渐变的效果;
线性渐变(linear-gadient)
颜色沿一条直线发生变化;
linear-gadient,线性渐变开头可以指定一个渐变的方向;
渐变可以同时指定多个颜色,多个颜色默认情况下平均分布;也可以手动指定渐变的分布情况;
可选值 | |
---|---|
to left | |
to right | |
to top | |
to bottom | |
XXXdeg | deg表示度 |
XXXturn | turn表示圈 |
repeat-linear-gradient()可以平铺线性渐变;
径向渐变
radial-grodient()渐变放射性效果;
默认情况下,径向渐变的形状根据元素的形状来设计的;也可以手动指定径向渐变的大小;
大小可选值 | 位置可选值 | |||
---|---|---|---|---|
circle | 正圆 | to right | ||
ellipse | 椭圆 | to left | ||
closest-side | 近边 | to center | ||
closest-corner | 近角 | tobottom | ||
farthest-side | 远边 | |||
farthest-corner | 远角 |
语法:
大小和位置都可以省略;
radial-gradient(大小 at 位置, 颜色 位置, 颜色 位置, 颜色 位置)