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

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伪类实现了你鼠标移动到上面就从黑白变彩色。

如何用css显示一个图片中多个小图标相关推荐

html中图片只是一个小图标,如何用css显示一个图片中多个小图标？
去搜一下css中background的用法,一切尽在其中. 最重要的一点是你要了解背景图片在控制项中显示的起始位置,控制项的高度,宽度. 以下是简要分析,你还要实践一下才能掌握真谛: 对一个宽度40 ...
如何用CSS画一个三角形？
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...
如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
css画心形原理,如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
通过css伪属性给div加小图标
通过css伪属性给div加小图标不换行,同时变... .freak{width: 100px;height: 100px;background-color: pink;position: relat ...
css代码实现各式各样的icon小图标
下载地址 css代码实现各式各样的icon小图标样式 dd:
如何用css绘制一个五角星并添加旋转动画
关于三角形的绘制,大家已经贡献过诸如将五角星切割成三个三角形来绘制等的更加标准简洁的画法,这篇文章权当抛砖引玉,为大家贡献一些不一样的思路吧,当然这个五角星的完成度也不是特别完美,有任何意见也欢迎大佬 ...

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

如何用css显示一个图片中多个小图标相关推荐

最新文章

热门文章