一张大图片有多个小图片

这个页面也是我看到别人的写的，感觉不错，就自己留下了为了以后自己可以容易找到，也希望可以方便到别人。

写这个页面

需要注意的是：

1.写每一个小图片的位置时候，要用id,这样等级就高了，不然不起作用。

2.因为每个图片的大小位置距离是差不多的。加入是30px, 那么第一个位置就是（-20px，-20px），因为位置是从（0,0）左上开始的，现在平移是  往右下走，就好比第四象限，按（-20n  px, - 20n  px）走。

3.引入的这个图片是一样的只是颜色不一样，都放到父级里，一个是现在的状态，一个是鼠标划过的状态，位置都不用变就可以换图片了。

 

 

 

<!doctype html>

<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>背景background-position切图</title>
    <style>
        .showImage{
            background-image: url(9pic2.jpg);
            width: 100px;
            height: 100px;
        }
        .showImage<a href="javascript:;" target="_blank" class="baidu-highlight">:hover</a>{
            background-image: url(9pic1.jpg);
        }
        ul{
            <a href="javascript:;" target="_blank" class="baidu-highlight">list-style</a>: none;
        }
        ul li{
            float: left;
            margin: 20px;
        }
        #item1{
            background-position: 0 0;
        }
        #item2{
            background-position: -100px 0;
        }
        #item3{
            background-position: -200px 0;
        }
        #item4{
            background-position: 0 -100px;
        }
        #item5{
            background-position: -100px -100px;
        }
        #item6{
            background-position: -200px -100px;
        }
        #item7{
        background-position: 0 -200px;
        }
        #item8{
            background-position: -100px -200px;
        }
        #item9{
            background-position: -200px -200px;
        }
    </style>
    </head>
    <body>
        <div class="container">
            <ul>
                <li id="item1" class="showImage"></li>
                <li id="item2" class="showImage"></li>
                <li id="item3" class="showImage"></li>
                <li id="item4" class="showImage"></li>
                <li id="item5" class="showImage"></li>
                <li id="item6" class="showImage"></li>
                <li id="item7" class="showImage"></li>
                <li id="item8" class="showImage"></li>
                <li id="item9" class="showImage"></li>
            </ul>
        </div>
    </body>
</html>

 

posted @ 2017-05-11 10:54  以后。h  阅读(926)  评论(0)    收藏  举报