如何用css显示一个图片中多个小图标

最新推荐文章于 2024-07-15 02:40:18 发布

讓丄帝愛伱

最新推荐文章于 2024-07-15 02:40:18 发布

阅读量856

点赞数 1

分类专栏：前端技术文章标签： css

本文链接：https://blog.csdn.net/ximaiyao1984/article/details/111728432

版权

前端技术专栏收录该内容

234 篇文章 7 订阅

订阅专栏

CSS显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。
先看下面这张300*300的大图片，每个小图标是100*100的。(这张图片名字叫9pic2.jpg)

在这里插入图片描述

首先先将你要放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：

.showImage{
    background-image: url(9pic2.jpg);
    width: 100px;
    height: 100px;
}

这么设置完毕后，大图片左上角那个小图标（这里假设是100*100的小图标）就出来了。

然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。你想象背景图片一开始是和当前元素左上角重合，但背景图片是可以移动的，由于浏览器坐标系x轴正向右，y轴正向下。所以，背景图片一般需要向左移动，和向上移动，这样移动的值往往都是负的。

比如上面第2张小图标，需要把大图片沿着x方向向左移动100px，y方向不变，设置background-position属性如下：

#item2{
    background-position: -100px 0;
}

其他的同理。

最后贴出来一个例子，看明白了这个属性就懂了。
用到的另一张图片名字叫9pic1.jpg,先贴出来
在这里插入图片描述

<!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:hover{
            background-image: url(9pic1.jpg);
        }
        ul{
            list-style: 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>