CSS知识点4

一.背景。

1.需要在html里添加背景用background。

2.如果要修改背景颜色用background-color。

3.添加背景图片用background-image，图片的选取方式为：url（图片路径）

4.定义背景图片的重复方式background-repeat ，一般初始默认为repeat 垂直水平平均重复 、

no-repeat 不重复平铺 repeat-x水平重复平铺 repeat-y垂直重复 。

示例：

 

 5.背景图片的位置background-position   x值    y值

示例：

 

 

6.背景图片的大小 background-size：width值   height值

或contain  包含     把背景图片等比例扩展至最大尺寸，以使他的宽高适应整个背景区域，可能背景区域有留白

示例：修改前：

 

修改后： 

 

或者： cover   覆盖把背景图片等比例扩大至足够大，以使他铺满整个背景区域，可能会使图片裁剪

示例：

 7.背景图片是否固定

可以定义背景是否固定background-attachment  默认为scroll默认不固定随页面滚动 可以修改为fixed 背景图片固定不动。

示例：

 

二.css精灵

css精灵是单个图像中包含的图像集合。

包含许多图像的网页可能需要很长时间才能加载，同时会生成多个服务器请求。

使用图像精灵将减少服务器请求的数量并节约带宽。

示例：这是4个图片 

 

 这是通过精灵合成以后的一个图片

 个人觉得比较好用的精灵生成网站：CSS Sprite Generator

用起来比较舒服  ，英文可以再网页界面右键翻译成中文。