如何用css顯示一個(gè)圖片中多個(gè)小圖標(biāo)？將多個(gè)小圖標(biāo)放在一個(gè)圖片中，用css如何定位大圖中的小圖標(biāo)呢？
2 回答
慕田峪7331174
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊
去搜一下css中background的用法，一切盡在其中。
最重要的一點(diǎn)是
你要了解背景圖片在控制項(xiàng)中顯示的起始位置，控制項(xiàng)的高度，寬度。
以下是簡(jiǎn)要分析，你還要實(shí)踐一下才能掌握真諦：
對(duì)一個(gè)寬度40，高度30的div設(shè)定一個(gè)背景，而背景圖片是一張很多小圖片的組合。
這里隱含了一個(gè)條件，就是小圖片的寬度和高度和小圖片的間隙要大于等于div的設(shè)置，原因：
當(dāng)你設(shè)定背景圖片的起始位置時(shí)，如果小圖片相對(duì)div太小，則會(huì)顯示多個(gè)小圖片，相反如果小圖片在一張整圖過(guò)大或布局不夠友好(比如間隙[上，下，左，右]),那么也是不算符合要求而導(dǎo)致顯示不完整或不合你的格。
講了上面這么多，有一個(gè)重要的地方，就是如何設(shè)置背景圖片的起始位置：
答案就在background-position里面了，當(dāng)然background也可以設(shè)置。
你找找別人的案例就會(huì)發(fā)現(xiàn)他們的position都設(shè)置為負(fù)數(shù)，比如background-position:-5px -4px;
這個(gè)就是背景圖片顯示的起始位置。那這個(gè)數(shù)字怎么設(shè)定呢？
哈哈，我是不是在賣(mài)關(guān)子？
呵呵，不賣(mài)關(guān)子，你咋能記得住。
還有這可是我經(jīng)驗(yàn)的積累，過(guò)程，分享。
說(shuō)正題，圖片在背景的顯示坐標(biāo)(我們就當(dāng)他是坐標(biāo))，為從圖片的左上角算起為原點(diǎn)(0,0),
向右則為負(fù)(跟一般的橫坐標(biāo)相反),向下也為負(fù)(跟縱坐標(biāo)一樣),那么單位(px，當(dāng)然也可以是其他的)則為刻度，好了，圖片定位完成。
接下來(lái)就是你想要顯示這個(gè)背景圖片的哪個(gè)小圖標(biāo)，請(qǐng)按坐標(biāo)標(biāo)記下小圖片的起始位置，那么
這就是你想要的background-position的結(jié)果了，至于怎么只顯示這個(gè)小圖片，就回到上面的講的，需要對(duì)背景圖片布局了，以及實(shí)際需求(比如div的高度寬度也覺(jué)得使用小圖片的大小),
當(dāng)然你會(huì)想，為什么不直接通過(guò)background來(lái)設(shè)置高度和寬度呢？我告訴你，是不行的。
所以你要對(duì)控制項(xiàng)div來(lái)設(shè)置高度和寬度，讓小圖片剛好顯示出來(lái)，說(shuō)了這么多，請(qǐng)看以下樣式:
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>
當(dāng)發(fā)生onmouseover事件的時(shí)候(當(dāng)然是你自己添加的事件,不過(guò)標(biāo)簽是<a>的話就用樣式A:over設(shè)置了),修改div的樣式變成如下:
<div class="myDiv over" ></div>
那么實(shí)際情況我只是對(duì)position的位置做了調(diào)整，也就是相當(dāng)于修改了背景圖片的顯示區(qū)域。
而這個(gè)顯示區(qū)域的變化就是2張小圖片的位置罷了~
好了，講是講完了，該你實(shí)踐了~
實(shí)踐才是進(jìn)步的唯一穩(wěn)步~
- 2 回答
- 0 關(guān)注
- 624 瀏覽
添加回答
舉報(bào)
0/150
提交
取消