css-雪碧圖

雪碧圖

雪碧圖是圖片拼接技術(shù),主要用來(lái)減少http請(qǐng)求。

制作

  1. ps 自己制作
  2. 使用工具,在windows有CSSGaga

使用

1.html結(jié)構(gòu)
使用css雪碧圖的一般html結(jié)構(gòu)具有相似性

<i></i>
<h3>電腦辦公</h3>

2.css樣式
一般的處理方式:給需要公用一個(gè)背景的元素使用同一個(gè)出class,同時(shí)給元素添加背景;
然后在具體的每一項(xiàng),使用背景定位來(lái)確定背景的位置。

注意

background-position的方向問題,是與我們的正常不一樣,

總結(jié)

制作
使用
HTML和CSS使用技巧
注意位置的方向問題

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 學(xué)會(huì)使用CSS選擇器熟記CSS樣式和外觀屬性熟練掌握CSS各種選擇器熟練掌握CSS各種選擇器熟練掌握CSS三種顯示...
    七彩小鹿閱讀 6,445評(píng)論 2 66
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,126評(píng)論 1 92
  • 一,首先來(lái)了解一下什么是CSS雪碧圖 來(lái)看這樣的一個(gè)網(wǎng)頁(yè) 你會(huì)發(fā)現(xiàn)這里面有許多的圖片,但是是否真的有這個(gè)多張圖片呢...
    大春春閱讀 2,672評(píng)論 0 8
  • 鈴兒突然叮鈴鈴響, 是誰(shuí)在把我逗醒, 是誰(shuí)正把我凝望, 幸福得我呀, 屁顛屁顛的, 甜蜜得我呀, 更暈乎乎地辨不清...
    香芋予香閱讀 492評(píng)論 0 1
  • 距離上次讀張愛玲,已過(guò)去近十年,彼時(shí)讀的都是張愛玲、亦舒、李碧華、潔塵、簡(jiǎn)媜、席慕蓉等一眾女作家,還有宋詞,陷入一...
    顏者閱讀 196評(píng)論 0 1

友情鏈接更多精彩內(nèi)容