>  기사  >  웹 프론트엔드  >  DIV+CSS效果(实现平滑投票效果等)_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:28:481475검색

这种技巧的名称叫做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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.