目录
背景
background-color
背景颜色background-image
背景图片background-repeat
背景图片重复background-position
背景图片位置background-size
设置图片大小background-origin
设置图片偏移量的原点,与background-position
一起用background-clip
背景显示的范围background-attachment
背景图片是否跟随元素移动
1. background-image 设置背景图片
-
可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
background-image: url("./1.jpg");
2. background-repeat 设置背景的重复方式
可选值:
-
repeat 默认值 ,背景沿着x轴与y轴双方重复
-
repeat-x
沿着x轴方向重复 -
repeat-y
沿着y轴方向重复 -
no-repeat
背景图片不重复background-repeat: no-repeat;
3. background-position 用来设置背景图片的位置
- 方位布局(top left right bottom center)
只写一个值,第二个默认是centerbackground-position:top right; //右上 background-position:top; //第二个值默认center ,所以是中上
- 偏移量
以坐上为定位进行偏移,第一个值是水平方向,第二个值垂直方向
只写一个,默认垂直是中间background-position:10px 10px; background-position:100px; //垂直默认是中间
4. background-clip 设置背景的范围
- border-box 默认值,整个盒子,包括边框
- padding-box 背景只在内容区和内边距
- content-box 背景只会出现在内容区
5. background-origin 背景图片的偏移量计算的原点
这个要结合background-position
- padding-box 默认值,原点从内边距开始计算
- content-box 原点从内容区开始计算
- border-box 原定从边框开始计算
background-origin: border-box;
background-position: 0px 0px;
6.background-size 设置背景图片的大小
-
参数设置(第一个宽度,第二个高度)
只写一个,第二个默认autobackground-size:100px 200px;
-
cover 图片比例不变,元素铺满
-
contain 图片比例不变,图片在元素中完整显示
7. background-attachment 背景图片是否跟随元素移动
scrpll
默认值,背景图片会跟随元素移动fixed
背景图片固定在页面中,不会随元素移动