如何用css显示一个图片中多个小图标？ CSS怎么让图标当图片显示？
CSS\u4e2d\u8c03\u7528\u4e00\u4e2a\u56fe\u7247 \u4f46\u662f\u56fe\u7247\u91cc\u9762\u6709\u5f88\u591a\u5c0f\u56fecss3\u6709\u4e00\u4e2a\u56fe\u7247\u5b9a\u4f4d\u5c5e\u6027\uff0cbackground-position;
\u6bd4\u5982\u6211\u4eec\u8981\u7528\u8981\u7b2c\u4e8c\u4e2a\u201c\u5fc3\u201d
\u9996\u5148\u521b\u5efa\u4e00\u4e2a\u76d2\u5b50\u7ed9\u4ed6\u4e00\u4e2a\u5bbd\u9ad8\u5ea6=\u56fe\u6807\u7684\u5bbd\u9ad8\u591a1px\uff0c\u4e3a\u4e86\u663e\u793a\u5b8c\u5168\u800c\u4e0d\u662f\u521a\u597d\u91cd\u53e0\uff0c\u6bd4\u5982\u8fd9\u91cc\u752820px\u4ee3\u66ff
\u4ee3\u7801\u5982\u4e0b\uff1a
.avatar {
position: relative;
width: 100px;
height: 100px;
}
.avatar > img {
width: 100px;
height: 100px;
border-radius: 50%;
}
.icon {
position: absolute;
right: 0; /*\u6839\u636e\u9700\u8981\u8c03\u6574\u6570\u503c*/
bottom: 0; /*\u6839\u636e\u9700\u8981\u8c03\u6574\u6570\u503c*/
width: 50px;
height: 50px;
font-size: 14px;
color: #fff;
background-color: yellow;
border-radius: 50%;
}
\u6216\u8005\u5c0f\u56fe\u6807
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显示一个大图片中的多个小图标，主要是用background-position这个属性来控制的。
首先先将放置背景小图标的元素的大小设置成图片里图标的实际大小，用width和height设置，然后用background-image把背景图片放进去，比如：
.showImage{
background-image: url(9pic2.jpg);
width: 100px;
height: 100px;
}
然后用background-position属性调整背景图片的位置，它有两个值分别表示背景图片沿着x和y轴移动的距离。
扩展资料
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成，属性是设置的样式属性（style attribute），每个属性都有一个值，属性和值用冒号分隔。CSS 声明总是以分号 ; 结束，声明组以大括号 {...} 括起来。为了让 CSS 可读性更强，可以每行只描述一个属性。
CSS 注释是用来解释代码，并且可以随意编辑，浏览器会忽略它。CSS注释以 "/*" 开始，以 "*/" 结束。
当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。CSS 创建样式表有三种方法：内联样式、内部样式、外部样式。
去搜一下css中background的用法，一切尽在其中。
最重要的一点是
你要了解背景图片在控制项中显示的起始位置，控制项的高度，宽度。
以下是简要分析，你还要实践一下才能掌握真谛：
对一个宽度40，高度30的div设定一个背景，而背景图片是一张很多小图片的组合。
这里隐含了一个条件，就是小图片的宽度和高度和小图片的间隙要大于等于div的设置，原因：
当你设定背景图片的起始位置时，如果小图片相对div太小，则会显示多个小图片，相反如果小图片在一张整图过大或布局不够友好(比如间隙[上，下，左，右]),那么也是不算符合要求而导致显示不完整或不合你的格。
讲了上面这么多，有一个重要的地方，就是如何设置背景图片的起始位置：
答案就在background-position里面了，当然background也可以设置。
你找找别人的案例就会发现他们的position都设置为负数，比如background-position:-5px -4px;
这个就是背景图片显示的起始位置。那这个数字怎么设定呢？
哈哈，我是不是在卖关子？
呵呵，不卖关子，你咋能记得住。
还有这可是我经验的积累，过程，分享。
说正题，图片在背景的显示坐标(我们就当他是坐标)，为从图片的左上角算起为原点(0,0),
向右则为负(跟一般的横坐标相反),向下也为负(跟纵坐标一样),那么单位(px，当然也可以是其他的)则为刻度，好了，图片定位完成。
接下来就是你想要显示这个背景图片的哪个小图标，请按坐标标记下小图片的起始位置，那么
这就是你想要的background-position的结果了，至于怎么只显示这个小图片，就回到上面的讲的，需要对背景图片布局了，以及实际需求(比如div的高度宽度也觉得使用小图片的大小),
当然你会想，为什么不直接通过background来设置高度和宽度呢？我告诉你，是不行的。
所以你要对控制项div来设置高度和宽度，让小图片刚好显示出来，说了这么多，请看以下样式:
div.myDiv {width:40px;height:30px}
div.myDiv{background-img:url(test.jpg);}
div.normal{background-position:-5px -10px;}
div.over{{background-position:-20px -30px;}
然后是html:
普通情况如下:
<div class="myDiv normal" ></div>
当发生onmouseover事件的时候(当然是你自己添加的事件,不过标签是<a>的话就用样式A:over设置了),修改div的样式变成如下:
<div class="myDiv over" ></div>
那么实际情况我只是对position的位置做了调整，也就是相当于修改了背景图片的显示区域。
而这个显示区域的变化就是2张小图片的位置罢了~
好了，讲是讲完了，该你实践了~
实践才是进步的唯一稳步~
1、用DW打开这里的操作软件，定义一个CSS样式，如下图所示。
2．首先看看背景图像的效果，如下图所示：
3．在div中添加一个img并输入以下代码。如下图所示：
4．可以实现如下图所示：
注意事项：
如果想让开发者创建一个ico图像，命名为favicon。ico，16＊16像素，不超过16种颜色，将favicon．ico放在网站的根目录下。
浏览器将继续搜索站点的根目录，无论何时找到一个名为favicon的文件。ico，它会在访问者的地址栏和收藏列表中显示图标。
用坐标，background-positon:50px 50px;先把标签的背景图片定义成公用的，然后哪个元素用到背景图片了就在那个元素后面定义相应图片的位置，不明白的可以问我
绛旓細css濡備綍璁╀笁涓猟iv骞舵帓灞曠ず锛屽叾瀹炲氨鏄缃涓涓娴姩鐐癸紝璁╀笁涓猟iv闈犲乏鎴栬呴潬鍙虫诞鍔紱涓昏鏍囩鐢ㄤ簬锛歠loat锛歭eft(闈犲乏瀵归綈)float:right(闈犲彸瀵归綈)锛氱ず渚嬪涓嬶細1銆侀鍏堟墦寮鐢ㄥ埌鐨勭紪杈戝伐鍏疯繖閲岀敤DW 2銆佷负浜嗘柟渚胯瀵燂紝鎴戜滑鎶婁笁涓猟iv璁剧疆涓変釜鑳屾櫙棰滆壊鏉ヨ瀵燂紝璁剧疆涓変釜div鏍峰紡杩欓噷鍙栧悕锛歞iv1 div2 div3 骞朵笖寮曠敤...
绛旓細" target="_blank" > ) no-repeat -150px -150px;width:100px;height:500px;}-->Test2绗涓涓搴旂敤鏄湪鎸夐挳涓婏紝閫氳繃background-position灞炴т腑浣嶇疆鐨勫兼潵杩涜瀹氫綅锛屽熀鏈牸寮忔槸background:#棰滆壊鍊 url(鍥剧墖鍦板潃) 閲嶅涓庡惁 2涓綅缃 background:#000 url(../../none.jpg) no-repeat right left...
绛旓細妤间富鎮ㄥソ銆傚湪涓嶄娇鐢ㄤ换浣CSS鐨勬儏鍐典笅锛屾偍鐩存帴鎻掑叆4寮鍥剧墖锛屾瘮濡傦細 瀹冧滑灏辨槸鍦ㄥ悓涓琛鏄剧ず鐨 ---琛ュ厖--- 浣犺创鐨勪唬鐮佷笉鑳借鏄庨棶棰樸傚鏋滃浘鐗囦笉鑳藉湪涓琛屾樉绀猴紝涓鑸潵璇村師鍥犲涓嬶細1.鍖呭惈鍥剧墖鐨勫鍣ㄥ搴﹀お灏 2.鍥剧墖鐨勬樉绀烘ā寮忚缃负浜嗗潡绾isplay:block ...
绛旓細瀵逛簬鍒濆css鐨勬柊鎵嬫湅鍙嬫潵璇达紝缁忓父浼氶亣鍒拌繖鏍涓涓闂锛屽綋鏂囧瓧鍜鍥剧墖鍑虹幇鍦ㄥ悓涓琛屾垨鑰呭悓涓涓猟iv閲岄潰鐨勬椂鍊欙紝鍦ㄦ祻瑙堝櫒涓繍琛屽嚭鏉ョ殑鏄剧ず鏁堟灉寰寰鏄湪涓嶅悓鐨勮锛岄偅涔堬紝鎴戜滑鎬庝箞鎵嶈兘鍒╃敤CSS浠ｇ爜浣垮浘鐗囧拰鏂囧瓧鍦ㄥ悓涓琛屾樉绀轰笖瀵归綈鍛紵 瀵逛簬杩欑鐜拌薄锛屾柟娉曟湁3绉嶏細 1銆侀氳繃娣诲姞css鐨勨渧ertical-align:middle;鈥濓紱 2...
绛旓細1銆佹墦寮鎿嶄綔杞欢杩欓噷鐢―W锛屽畾涔涓涓猚ss鏍峰紡锛屽涓嬪浘 2銆侀鍏堢湅涓嬶紝鑳屾櫙鍥炬晥鏋滐紝濡備笅鍥炬墍绀猴細3銆佸湪div涓坊鍔犱竴涓猧mg锛岃緭鍏ヤ互涓嬩唬鐮併傚涓嬪浘鎵绀猴細4銆佸嵆鍙疄鐜板棰橈紝css鍥剧墖涔嬩笂鍐嶅姞涓寮犲浘鐗囷細濡備笅鍥炬墍绀猴細
绛旓細鍙互鍟 鎬庝箞涓嶅彲浠ュ晩 鐩稿綋浜庤繖鏍 xianl img{width:100px;height:100px;锛堜笅杈圭嚎锛塨order-bottom:1px solid #ff0; marign:5px;} 杩欐牱鍚 闅惧埌璇存槸杩欐牱
绛旓細缁欎綘鍋氫簡涓涓婊氬姩浠ｇ爜锛宧tml浠ｇ爜濡備笅锛<!DOCTYPE html> 涓嶉棿鏂鍥剧墖婊氬姩鍦ㄧ嚎婕旂ず DIVCSS5 <!-- www.divcss5.com --> (function(){ ('#Marquee_x').jcMarquee({ 'marquee':'x','margin_right':'10px','speed':20 });// DIVCSS5鎻愮ず...
绛旓細鏃㈢劧妤间笂鐨勮兘鍋氱殑閮藉仛浜嗭紝鎴戠敤琛ㄦ牸鍋氱粰浣狅紒锛佷綘瑕佹槸鎯宠涓鎺掍笁寮犱篃鍙互锛屽彧瑕佹敼.box{width:鏀硅繖閲岋紝瀹藉害瓒冲鏀句笅澶т簬960px灏忎簬1280px灏辨槸涓夊紶鍥剧墖浜唥 .box{width:650px;} .box table{display:block;float:left;width:300px;height:320px;} .box img{border:1px solid #478332} ...
绛旓細杩欎釜鍙互鐢╬s鏉ユ祴閲忎竴涓嬫瘡涓浘鏍囩殑鍧愭爣锛岀涓婄殑璺濈鍜岀宸︾殑璺濈銆傝繖鏍峰氨鍙互鍦ㄦ牱寮忛噷鍔犱笂鍧愭爣浠ｇ爜 background:url(images/xx.png) 40px 10px no-repeat;
绛旓細 aa{ background:url(05.jpg) repeat-x; height:24px; width:288px;} li{ float:left;}
