CSS背景设置

背景颜色

在css中有一个background-color属性，专门用于设置标签的背景颜色

取值：

具体单词

rgb

rgba

十六进制

十六进制缩写

快捷键：bc

 背景图片

在css中有一个background-image：url（）的属性，就是专门用于设置背景图片

注：

1.图片的地址必须放在url（）中，图片的地址可以是本地的地址，也可以是网络上的地址

2.如果图片的大小小于标签的大小，那么会自动在水平和垂直方向平铺和填充

3.如果网页上出现了图片，那么浏览器会再次发送请求获取图片

快捷键：bi

背景平铺

在css中有一个background-repeat属性，专门用于控制背景图片的平铺方式

取值：

repeat（默认）：在水平和垂直方向都平铺

no-repeat：在水平和垂直反向都不平铺

repeat-x：只在水平方向平铺

repeat-y：只在垂直方向平铺

快捷键：bgr

应用场景：可以通过背景图片的平铺来降低图片大小，提升网页的访问速度

注：同一个标签可以同时设置背景颜色和图片，图片会覆盖颜色

背景定位属性

在css中有一个background-position属性，专门用于控制背景图片的位置

格式：background-position：水平方向 垂直方向；

取值：

1.具体的方位名词：

水平方向：left center right

垂直方向：top center bottom

2.具体的像素：例：20px 50px

注：

1.像素取值一定要写单位px

2.像素取值可以接受负数的

快捷键：bp：background-position:

背景关联方式

默认情况下背景图片会随着滚动条滚动而滚动，不想随着滚动可以修改背景图片和滚动条的关联方式

在css中有一个background-attachment的属性，专门用于修改关联方式的

格式：

background-attachment：scroll；

取值：

scroll（默认）：会随着滚动条的滚动而滚动

fixed：不会滚动

快捷键：bga

背景属性缩写

格式：

background：背景颜色 背景图片 平铺方式 关联方式 定位方式；

注：background属性中，任何一个属性都可以被省略

快捷键：

bg+：background: #fff url() 0 0 no-repeat;

背景图片和插入图片的区别：

1.背景图片仅仅是一个装饰，不会占用位置

2.背景图片有定位属性，方便控制图片的位置；插入图片没有定位属性，不方便控制图片位置

3.插入图片的语义比背景图片的语义要强，所有开发中如果图片想被搜索引擎收录，推荐使用插入图片

css精灵图

css精灵图是一种图像合成技术,配合背景图片和背景定位来使用

作用：可以减少请求的次数，以及降低服务器处理压力