当前位置: 代码迷 >> HTML/CSS >> 关于图片背景的疑问!例:别人一张网页多张背景图片被引用同一个GIF!该怎么处理
  详细解决方案

关于图片背景的疑问!例:别人一张网页多张背景图片被引用同一个GIF!该怎么处理

热度:310   发布时间:2012-02-25 10:01:48.0
关于图片背景的疑问!例:别人一张网页多张背景图片被引用同一个GIF!
例:
上图存放着多个不一样的图!

但是别人
#topnav{ background:url(http://static.m1905.com/201009/images/nav0722_mini.gif) left top repeat-x; height:25px; min-width:922px; position:relative; z-index:999; border-bottom:1px solid #ececec;}

.navSEClist .searchSECbox .selectArrow{background:url(http://static.m1905.com/201009/images/nav0722_mini.gif) left -51px repeat-x; width:9px; height:20px; display:block;border-right:1px solid #cbcbcb;}

CSS也是这样就引用了!

我看了很久不明白怎么去定位图中的某一位置的图为背景的!

示例网址:http://www.m1905.com/vod/482448.shtml#p2p

CSS地址:http://css.static.m1905.cn/201009/base_new0722.css

求解!怎么做到这效果!

------解决方案--------------------
用的图片位移

background-position这个属性

background:url(http://static.m1905.com/201009/images/nav0722_mini.gif) left top repeat-x;

background:url(http://static.m1905.com/201009/images/nav0722_mini.gif) left -51px repeat-x;


看我上面标红的地方

这是一种技术,叫css Sprites 楼主要是不明白 可以百度去查查有介绍
------解决方案--------------------
现在很多网站这么用吧, 
省图片, 省空间, 觉得好处还是蛮多的, 

background:url(http://static.m1905.com/201009/images/nav0722_mini.gif) left -51px repeat-x;
就这后面的参数, 
其实你自己完全可以百度到更好的解释答案,