css背景

一、如何设置标签背景颜色
在css中通过background-color: 取值; 来设置

.box{
            background-color: red;
        }

二、如何设置背景图片
在css中通过background-image: url(“”); 来设置
注意点：图片地址可以是本地地址，也可以是网络地址;如果图片的大小没有标签的大小大，那么会自动在水平和垂直方向平铺和填充

三、背景平铺属性
background-repeat:取值;
repeat：默认水平和垂直方向都要平铺
repeat-x:只在水平方向平铺
repeat-y:只在垂直方向平铺
no-repeat:水平和垂直方向都不需要平铺
应用场景：可以通过背景图片的平铺来降低图片的大小，提升网页的访问速度

四、背景定位
1、如何控制背景图片的位置
在css中通过background-position: 水平方向 垂直方向; 用于控制背景图片控制
2、取值
2.1、具体的方位名词
水平方向：left center right
垂直方向：top center bottom
2.2、像素
例如：100px 200px 一定要写单位；可以接收负数

注意点：同一个标签可以同时设置背景颜色和图片，如果颜色和图片同时存在，那么图片会覆盖颜色

五、背景关联和缩写
1、背景属性缩写格式
background: 背景颜色 背景图片 平铺方式 关联方式 定位方式;
注意点：background属性中，任何一个属性都可省略

.box1{
            width: 1500px;
            height: 1500px;
            background: red url("IMG_0741.JPG") repeat-x left bottom;
        }

2、背景关联方式：默认情况下背景图片会随着滚动条的滚动而滚动，如果不想让背景图片随着滚动条而滚动，那么就可使用关联方式
css中通过background-attachment:取值; 来修改关联方式
取值：
scroll：默认值，随之滚动条滚动而滚动
fixed：不会随着滚动条的滚动而滚动

六、背景图片和插入图片的区别
1、背景图片不占位置，插入图片占位置
2、背景图片有定位属性，可以很方便的控制位置，而插入图片没有定位属性
3、插入图片的语义比背景图片的语义要强，如果图片想要被搜素引擎收入，推荐使用插入图片

七、精灵图：一种图片的合成技术
1、作用：可以减少请求的次数以及降低服务器的处理压力
2、css的精灵图需要配合背景图片和背景定位来使用