如何用css显示一个图片中多个小图标?
答案:3 悬赏:10 手机版
解决时间 2021-04-06 18:56
- 提问者网友:辞取
- 2021-04-06 12:40
如何用css显示一个图片中多个小图标?
最佳答案
- 五星知识达人网友:青尢
- 2021-04-06 13:35
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伪类实现了你鼠标移动到上面就从黑白变彩色。
先看下面这张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,先贴出来:
代码如下:
这个例子把那个图片打散,横排在页面上,还用:hover伪类实现了你鼠标移动到上面就从黑白变彩色。
全部回答
- 1楼网友:不如潦草
- 2021-04-06 15:56
用坐标,background-positon:50px 50px;先把标签的背景图片定义成公用的,然后哪个元素用到背景图片了就在那个元素后面定义相应图片的位置,不明白的可以问我
- 2楼网友:洒脱疯子
- 2021-04-06 15:08
去搜一下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的程序可以
最重要的一点是
你要了解背景图片在控制项中显示的起始位置,控制项的高度,宽度。
以下是简要分析,你还要实践一下才能掌握真谛:
对一个宽度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的程序可以
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯