06-CSS背景和精灵图

html-css015

06-CSS背景和精灵图,第1张

1.如何设置标签的背景颜色?

1.如何设置背景图片?

注意点:

1.如何控制背景图片的平铺方式?

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

1.如何控制背景图片的位置?

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

1.背景属性缩写的格式

2.注意点:background属性中, 任何一个属性都可以被省略

3.什么是背景关联方式?

4.如何修改背景关联方式?

1.背景图片和插入图片区别?

1.什么是CSS精灵图

CSS精灵图是一种 图像合成技术

2.CSS精灵图作用

可以减少请求的次数, 以及可以降低服务器处理压力

3.如何使用CSS精灵图

CSS的精灵图需要配合背景图片和背景定位来使用

css图片精灵视频教程已上传,请楼主鉴赏!高清,讲解详细。

很简单的技术,但是看完以后一定要多多练习,就不会那么迷惑了!

有几篇关于CSS Sprites的文章,基本上把其原理和机制说明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites

css精灵,即CSS Sprite,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。