背景background

background-image:设置元素的背景图片

1. 会盖在background-color 的上面
2. background-image: url(../img/text.jpg), url(../img/text1.jpg)  设置第一张图片将显示在最上面,其他图片按顺序层叠在下面
3. 注意: 如果设置了背景图片后, 元素没有具体的宽高,背景是不会显示出来的

background-repeat 平铺

1. repeat: 默认
2. repeat-x: 水平方向
3. repeat-y: 垂直方向
4. no-repeat: 不平铺

background-size: 用于设置背景图片的大小

1. auto 以背景图片本身大小显示
2. cover: 缩放背景图, 以完全覆盖铺满整个元素
3. cantain: 缩放背景图,拉伸到一个方向的宽度(高度),不再拉伸,保持图片的宽高比不变
4. <percentage> : 百分比,相对于背景区
5. length: 具体大小,比如100px

6. .box {
         width: 800px;
         height: 500px;
         background-color: #00f;
         background-image: url(./img/jiayou.jpg), url();
         background-repeat: no-repeat;
         /* cover 对背景图片进行拉伸.让图片覆盖整个元素 */
         /* contain 对背景图片进行拉伸,拉伸到一个方向的宽度(高度),不再拉伸,保持图片的宽高比不变*/
         /* background-size: contain; */
   
         /* 设置值:百分比或具体大小 */
         /* background-size: 50% 50%; */
         background-size: 300px 300px;
       }
     

    

background-position 用于设置背景图片在水平/垂直方向上的具体位置

1. 可以设置具体指  background-position:100px 100px 
   1. 第一个参数为水平方向,第二个参数为垂直方向
2. 水平方向还可以设置: left, center, right
3. 垂直方向还可以设置: top, center, bottom
4. 如果只设置一个方向,另一个方向默认为center　　

 background-attachment  用于设置背景图片随内容的动态

1. scroll: 背景图随元素一起滚动(默认值)
2. local: 背景图随元素及元素内容一起滚动
3. fixed: 背景图相对于浏览器窗口固定

background背景的一系列缩写属性

1. 常用格式: image position/size repeat attachment color
2. background-size 可以省略,如果不省略, /background-size必须紧跟在background-position的后面
3. 其他属性也都可以省略,而且顺序任意

background-image 与img的选择

 

 

css sprite css精灵

是一种css图像合成技术,将各种小图片合并到一张图片上,然后利用css的背景定位来显示对应的图片部分

1. 有人翻译为: CSS精灵. CSS雪碧

使用csssprite的好处

1. 减少网页的http请求数量,加快网页响应速度,减轻服务器压力
2. 减小图片总大小
3. 解决图片命名的困扰,只需要针对一张集合图片的命名