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

html-css013

如何用css显示一个图片中多个小图标?,第1张

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>

这个例子把那个图片打散,横排在页面上,还用:hover伪类实现了你鼠标移动到上面就从黑白变彩色。

代码如下:

.avatar {

position: relative

width: 100px

height: 100px

}

.avatar >img {

width: 100px

height: 100px

border-radius: 50%

}

.icon {

position: absolute

right: 0/*根据需要调整数值*/

bottom: 0/*根据需要调整数值*/

width: 50px

height: 50px

font-size: 14px

color: #fff

background-color: yellow

border-radius: 50%

}

<div class="avatar">

<img src="头像图片" >

<div class="icon">

<img src="图片" >

或者小图标

</div>

</div>