背景
background-color
background-image
background-repeat
background-position
background-clip
background-origin
background-size
background-attachment
background
- 雪碧图
- 线性渐变
- 径向渐变
background-color
设置背景颜色
background-image
设置背景图片
background-image: url("./img/1.png";)
- 可以同时设置背景图片与背景颜色,背景颜色会成为图片的背景
- 若背景图片小于元素,则背景图片会自动在元素中平铺将元素铺满
- 若背景图片大于元素,则会一个部分背景无法完全显示
- 若背景图片和元素一样大,则正常显示
background-repeat
用来设置背景的重复方式
background-repeat | 可选值 |
---|---|
repeat | (默认值)背景会沿着x轴 y轴双方向重复 |
repeat-x | 沿着x轴方向重复 |
repeat-y | 沿着y轴方向重复 |
no-repeat | 背景图片不重复 |
background-position
用来设置背景图片的位置
- 设置方式:
1.通过top left right bottom center
几个表示方位的词来设置背景图片的位置
(使用方位词时必须要同时指定两个值,如果只写一个,另一个默认为center)
2.通过偏移量来指定背景图片的位置:
水平偏移量 垂直偏移量
设置背景的范围
background-clip
用来裁减背景
background-clip: xxxx; | 裁减背景 |
---|---|
border-box | (默认值)背景会出现在边框的下边 |
padding-box | 背景不会出现在边框,只出现在内容区和内边距 |
content-box | 背景只出现在内容区 |
background-origin
用来设置背景图片偏移量计算的原点
background-origin | 可选值 |
---|---|
padding-box | (默认值)background-position从内边距处开始计算 |
content-box | 背景图片的偏移量从内容区处计算 |
border-box | 背景图片的变量从边框处开始计算 |
设置背景图片的大小:background-size
- 第一个值表示宽度,第二个值表示高度
- 如果只写一个,则第二个默认值为 auto
cover
图片的比例不变,将元素铺满
contain
图片的比例不变,将图片在元素中完整显示
background-attachment
用来设置背景图片是否跟随元素移动
background-attachment | 可选值 |
---|---|
scroll | (默认值)背景元素会跟随元素移动 |
fixed | 背景会固定在页面中,不会随元素移动 |
background 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置,并且该样式没有顺序要求,也没有哪个属性是必须写的
注意:
1.background-size
必须写在background-position
的后边,并且使用/
隔开
background-size/background-position
2. background-origin background-clip
两个样式, origin
要在clip
前边
雪碧图(CSS-Sprite
)的使用步骤
- 先确定要使用的图标
- 测量图标的大小
- 根据测量结果创建一个元素
- 将雪碧图设置为元素的背景图片
- 设置一个偏移量以显示正确的图片
雪碧图的特点
一次性将多个图片加载进页面,降低请求次数,加快访问速度,提升用户体验
线性渐变:渐变是图片,需要通过background-image
来设置
-
线性渐变,颜色沿着一条直线发生变化
linear-gradient()
-
线性渐变的开头,可以指定一个渐变的方向
-to left
-to right
-to top
-to bottom
-xxxdeg
deg表示度数
-xxxturn
表示圈 -
渐变可以同时指定多个颜色,多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况
-
可以平铺的线性渐变
repeating-linear-gradient()
径向渐变
- 径向渐变(放射性的效果)
radial-gradient()
语法:radial-gradient( 大小 at 位置,颜色 位置, 颜色 位置, 颜色 位置)
- 大小
-circle
圆形
-ellipse
椭圆
-closest-side
近边
-closest-corner
近角
-farthest-side
远边
-farthest-corner
远角 - 位置
-top right left center bottom
- 大小