CSS实现显示一张图片的部分图片例子

发布时间:2019-08-07编辑:脚本学堂
一张图片怎么让它只显示一部分呢?这种效果在网页中经常见到的,下面就举例说明实现这种效果的方法。需要的朋友参考一下。

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;
#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;}
-->
 

以上就是显示一张图片的部分图片的例子,有兴趣的同学可以制作一页面试试效果。