设为首页收藏本站

嘻皮客娱乐学习网

 找回密码
 中文注册
搜索
打印 上一主题 下一主题
开启左侧

[网页制作] css中把所有背景图都放在一张图片上

[复制链接]
跳转到指定楼层
楼主
发表于 2014-10-29 16:40:04 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
css中把所有背景图都放在一张图片上

                                                                                               
                    之前做网站时大家都是把背景切成单个小图片,要用背景的时候一个个调用,这样页面打开的时候,也会加载各个小图片,但是这种办法把所有小图片都集中在一张图中,定义背景时用坐标定位,再结合高度,宽度限制等手段,过到相同的效果,好处是:虽然下载的总K数不会有明显变化,但是图片的请求次数却明显减少了,减少了图片服务器的请求次数,减轻服务器的压力。
以下为引用的内容:  
<style type="text/css">
.bg1
{background:url(bg_v.png) no-repeat 0 0;padding-left:20px;}
.bg2
{background:url(bg_v.png) no-repeat 0 -20px;padding-left:20px;}
.bg3
{background:url(bg_v.png) no-repeat 0 -40px;padding-left:20px;}
.bg4
{background:url(bg_v.png) no-repeat 0 -60px;padding-left:20px;}
.bg5
{background:url(bg_v.png) no-repeat 0 -80px;padding-left:20px;}
</style>

<a href="#" class="bg1">bg1</a>
<a href="#" class="bg2">bg2</a>
<a href="#" class="bg3">bg3</a>
<a href="#" class="bg4">bg4</a>
<a href="#" class="bg5">bg5</a>

<br /><br />
<img src="bg_v.png" />


回复

使用道具 举报

小黑屋|手机版|嘻皮客网 ( 京ICP备10218169号|京公网安备11010802013797  

GMT+8, 2024-4-29 05:32 , Processed in 0.223472 second(s), 25 queries , Gzip On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表