css3 - 一個(gè)關(guān)于CSS雪碧圖的問(wèn)題
問(wèn)題描述
第二個(gè)CSS屬性.plate-2after,使用的是雪碧圖,position定位,效果應(yīng)該是鼠標(biāo)移到下圖3.23-3.30新東方模考那個(gè)帳篷上,
然后彈出.plate-2after中設(shè)置的雪碧圖中的由上往下第二張圖片(下附雪碧圖)
目前可以確定jQuery的寫(xiě)法沒(méi)有問(wèn)題,問(wèn)題應(yīng)該是出在CSS代碼上,希望有雪碧圖玩的6的朋友們,幫忙看一下,是哪里需要修改,感謝了!
問(wèn)題解答
回答1:自己計(jì)算容易出錯(cuò),利用工具來(lái)做,事半功倍
http://www.spritebox.net
希望有所幫助~ :)
回答2:background-position定位錯(cuò)了。如果你css中引用的sprite.png是第三張圖,.plate-2after是為了顯示文字部分的那張圖。那么你想顯示的位置就在0 0 的地方。.plate-2after的寬度高度設(shè)置好182*108以后。關(guān)于位置部分的css應(yīng)該是 background:URL(sprite.png) no-repeat 0 0;
第一次回答問(wèn)題,有表述不清的地方望見(jiàn)諒。:-D
回答3:.plate-2after 這個(gè)類里面怎么沒(méi)有寫(xiě)width和height,以及position:absolute;呢
回答4:你這個(gè)寫(xiě)法看不到前面的,連盒子都沒(méi),出圖才怪。
相關(guān)文章:
1. javascript - vue2.0中,$refs對(duì)象為什么用駝峰的方式獲取不到屬性?2. css3中translate(-50%,-50%)對(duì) transform-origin的奇葩影響?3. 隨機(jī)產(chǎn)生200個(gè)小寫(xiě)英文字母,并統(tǒng)計(jì)個(gè)數(shù),這是在網(wǎng)上看到的粒子,我想問(wèn)怎樣把它變得更簡(jiǎn)便?4. javascript - ng-bind-html中 自定義的指令 不生效!5. weex - Android 原生Vue.js 使用 justify-content: flex-end; 不起作用6. 前端 - webapp 通過(guò)angular來(lái)做界面切換,能否做成native應(yīng)用的效果?7. css - .clearfix:after中為什么設(shè)置display: table8. javascript - js怎么實(shí)現(xiàn)jq的addclass,removeclass,例如本來(lái)是 class="aa",要變成class="aa bb"9. css - 定位為absolute的父元素中的子元素 如何設(shè)置在父元素的下面?10. JQuery的目的在哪里?設(shè)置這些也可以通過(guò)css解決!
