背景图片的相关设置

通过设置背景图片的不同属性进行设置背景

background-image 设置背景图片-可以设置背景图片和背景颜色&＃xff0c;这样背景颜色将会成为图片的背景色-如果背景的图片小于元素&＃xff0c;则背景图片会自动在元素中平铺将元素铺满-如果背景的图片大于元素&＃xff0c;则会一部分背景无法完全显示-如果背景图片和元素一样大&＃xff0c;则会直接正常显示

background-repeat: 设置背景的重复方式
可选值&＃xff1a; repeat 默认值、 xy双方向重复 铺满repeat-x 沿着x方向
repeat-y 沿着y方向
no-repeat 背景图片不重复 有多大就是多大

background-position: 设置背景图片的位置

设置方式&＃xff1a;

                   通过 top left right bottom center 几个表示方位的词来设置背景图片的位置

               需要指定2个 如果只写一个 则默认第二个为center

通过偏移量来指定背景图片的位置&＃xff1a;
水平方向偏移量 垂直方向偏移量

设置背景的范围 

background-clip:
可选值&＃xff1a;border-box 默认值,背景会出现在边框的下边padding-box 背景不会出现在边框&＃xff0c;只出现在内容区和内边距
content-box 背景只会出现在内容区background-origin 背景图片的偏移量计算的原点padding-box 默认值background-position从内边距处开始计算content-box 背景图片的偏移量从内容区处计算border-box 背景图片的偏移量从边框处开始计算

background-size: 设置背景图片大小
第一个表示宽度第二个表示高度
如果只写一个则第二个 默认就是auto 自动等比例缩放cover 图片比例不变&＃xff0c;将元素铺满
contain 图片比例不变&＃xff0c;将图片在元素中完整显示

 

.box1{width: 500px;height: 500px;background-color: orchid;background-image: url(../img/4.jpg);background-repeat: no-repeat;background-size: contain;}

background-attachment:  背景图片是否跟随元素移动

可选值&＃xff1a;

 scroll 默认值 背景图片会跟随元素移动

 fixed 背景图片会跟随元素移动

.box1{width: 300px;height:300px;overflow: auto;background-color: #bfa;background-image: url(../img/1.jpg);background-repeat: no-repeat;background-position: 0 0;background-origin: content-box;background-clip:content-box ;border: 10px red double;background-size: contain;}

.box2{width: 200px;height: 1000px;/* background-color: orange; */background-image: url(../img/bg.png);background-repeat: no-repeat;background-position:100px 100px ;background-attachment:fixed ;}