Heim >Web-Frontend >HTML-Tutorial >DIV+CSS效果(实现平滑投票效果等)_html/css_WEB-ITnose

DIV+CSS效果(实现平滑投票效果等)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:28:481513Durchsuche

这种技巧的名称叫做CSS Sprite,基本原理就是利用CSS中图片background系列的 background-image、background-repeat、background-position等属性实现。通过这种方式达到图片显示 加速的关键,不是降低重量,而是减少个数。在通常情况下一张图片的传输时间,通常远小于请求等待的时间。

PS:特别制作了三个CSS Sprites实例演示,感兴趣的朋友可以看一看。

实例
比如google.cn现在首页的底部导航也是用这个方式实现的。
所用图片为:http://www.ccvita.com/wp-content/uploads/demo/css/google.gif
效果:http://www.google.cn

代码
从网上找了好几个演示,大家可以看下面地址的演示:CSS Sprites实例演示
效果一:纵向背景图

效果二:横向背景图

效果三:平滑投票

 

转自:http://www.ccvita.com/322.html#more-322

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn