定位背景图片

CSS 定位背景图片,常见的例子有树型插件,前面的+号,-号,和文件夹等都是根据图片中的位置来取显示的。只有一张背景图。

实现代码也很简单

<html>
<head>
<style type="text/css">
#div0
{ 
width:50px;
height:130px;
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-position: 0px 0px;
margin-right:2px;
float:left;
}
#div1
{ 
width:50px;
height:130px;
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-position: -50px 0px;
margin-right:2px;
float:left;
}
#div2
{ 
width:50px;
height:130px;
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-position: -100px 0px;
margin-right:2px;
float:left;
}
</style>
</head>

<body>
<div id="div0"></div>    
<div id="div1"></div>
<div id="div2"></div>
<img src="/i/eg_bg_03.gif"/>  <!--这是背景图全图-->
</body>
</html>

猜你喜欢

转载自blog.csdn.net/happygirlnan/article/details/86353463