关于CSS“ 显示一张图片的部分图片”问题

rebecca

废话少说，举例
 
 
原本图片，

 
HTML代码，
 
<--!
 

                                                             <!--财经资讯篇-->
   
               
        <div class="left_1" style="margin-top:10px;">
           
    <h2 class="bg_title"><img class="top_h_1" src="pics/top_h_1.jpg" /></h2>

        <ul class="cjzx">
        <li id="cj_0"><a href="/" >星座”虎女郎“的时装本命</a></li>
        <li id="cj_1"><a href="/" >全球最漂亮的脸蛋排行</a></li>
        <li id="cj_2"><a href="/" >星座谁的房屋最乱</a></li>
        <li id="cj_3"><a href="/" >谈结婚就逃跑的结婚情人</a></li>
        <li id="cj_4"><a href="/" >射手和天蝎的麻辣爱情</a></li>
        <li id="cj_5"><a href="/" >最容易对女孩子一见钟情的星座</a></li>
        <li id="cj_6"><a href="/" >注定一辈子谈不拢的星座</a></li>
        <li id="cj_7"><a href="/" >首相中隐藏的惊人秘密</a></li>
        <li id="cj_8"><a href="/" >最容易对女孩子一见钟情的星座</a></li>
        <li id="cj_9"><a href="/" >注定一辈子谈不拢的星座</a></li>
       
        </ul>
</div>                                                        <!--财经资讯结束-->
 
-->
 
CSS 代码，
 
<--!


                                                /*财经资讯*/

.left_1 {widh:252px;border:1px solid #dcdcdc; padding:1px;margin:0 6px;float:left;}
.cjzx{width:252px; height:280px;padding:0px; overflow:hidden;font-size:14px;}
.cjzx li{text-align:left;
    display:block;
    list-style:none ;
    line-height:200%;
    padding:4px;
    text-indent:30px;
     width:226px;
     height:20px;
     text-overflow:hidden;
   white-space:nowrap;}

#cj_0{
         background:url(../pics/list_c.png) no-repeat;
          background-position:0px 6px;
          position: relative;                         //如果设定了list前面的图片，那么样式一定要确定，list-style:none ;无样式

             }
#cj_1{background:url(../pics/list_c.png) no-repeat;
          background-position:0  -20px;

          position: relative;}
#cj_2{background:url(../pics/list_c.png) no-repeat;
          background-position:0  -46px;
          position: relative;}
#cj_3{background:url(../pics/list_c.png) no-repeat;
          background-position:0  -72px;
          position: relative;}
#cj_4{background:url(../pics/list_c.png) no-repeat;
          background-position:0  -98px;
          position: relative;}
#cj_5{background:url(../pics/list_c.png) no-repeat;
          background-position:0  -124px;
          position: relative;}

#cj_6{background:url(../pics/list_c.png) no-repeat;

          background-position:0  -150px;
          position: relative;}
#cj_7{background:url(../pics/list_c.png) no-repeat;
          background-position:0  -178px;
          position: relative;}
#cj_8{background:url(../pics/list_c.png) no-repeat;
          background-position:0  -204px;
          position: relative;}
#cj_9{background:url(../pics/list_c.png) no-repeat;
          background-position:0  -230px;
          position: relative;}             


 
-->
 
 
显示，