永发信息网

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

答案:3  悬赏:10  手机版
解决时间 2021-04-06 18:56
如何用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,先贴出来:

代码如下:



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

全部回答
用坐标,background-positon:50px 50px;先把标签的背景图片定义成公用的,然后哪个元素用到背景图片了就在那个元素后面定义相应图片的位置,不明白的可以问我
去搜一下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:
普通情况如下:

当发生onmouseover事件的时候(当然是你自己添加的事件,不过标签是的话就用样式A:over设置了),修改div的样式变成如下:

那么实际情况我只是对position的位置做了调整,也就是相当于修改了背景图片的显示区域。
而这个显示区域的变化就是2张小图片的位置罢了~
好了,讲是讲完了,该你实践了~
实践才是进步的唯一稳步~追问有什么软件能快速定位小图标的起始位置吗?追答我很少这样做,不过好像有个叫sprite的程序可以
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
武汉科技职业学院(西北门)在什么地方啊,我要
录音,录完了在那能找到,
第一小题值域结果为什么是单调递减的,是怎么
大众2000一加油门钢盖响怎么回事
望庐山瀑布的名句,湖口望庐山瀑布水张九龄带
单选题地球上已有的生物约200万种,其中只进
她是日本的那个名人,叫s m
中华经典诗词约70至100字
埋藏的意思是什么,埋有哪两种读音?分别怎么
退股时折旧款能做为利润退回吗
对方是支付宝,转账给我的银行卡上截图交易成
最新王者锻造得多少钱一把永久
情侣网名, 套路太深,下一句是什么
下列关于细胞生命活动的叙述,不正确的是A.不
pritice, pritise exercise的区别
推荐资讯
橡皮章材料从哪进货
js中 a = !0 这个!0是什么意思
求带有冬和婷的情侣网名或诗句
奔跑吧兄弟一至十二期全部嘉宾名单
昌盛大街/朋远街(路口)在哪里啊,我有事要去
龙腾百货批发部在什么地方啊,我要过去处理事
一个小偷用锤子撬开自行车的锁,一个看风。翻
长沙高新区华瑞IT怎么样,有没有从那里毕业或
雪兰牛奶新螺蛳湾配送中心地址在哪,我要去那
锦都会所地址有知道的么?有点事想过去
玩lol到读取进度就死机。4g内存条,以前玩的
淘学员培训在哪里进行,每天都有课程吗
正方形一边上任一点到这个正方形两条对角线的
阴历怎么看 ?