1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
雪碧圖指很多張圖片合成一張圖片决左,作用是在html使用時(shí)耘子,減少不必要的網(wǎng)絡(luò)請求液南,只要加載一個(gè)網(wǎng)絡(luò)請求踩麦,調(diào)整圖片的位置就能獲得圖片枚赡。。
2.img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別
img標(biāo)簽是一個(gè)塊元素谓谦,如果這個(gè)圖片與其他內(nèi)容有相關(guān)聯(lián)的則需要img標(biāo)簽
css背景使用圖片是圖片固定不變的情況下使用的贫橙,而且只是一個(gè)css樣式。
3.title和 alt屬性分別有什么作用
title的作用只是提供標(biāo)簽的額外屬性反粥,如<img src="xxx" alt="測試" title="text"> 當(dāng)鼠標(biāo)指著xxx圖片時(shí)會出現(xiàn)text的提示卢肃,作額外解釋作用。
alt則是 當(dāng)<img src="xxx" alt="測試" title="text"> 中的圖片由于網(wǎng)絡(luò)問題無法顯示時(shí) 圖片框里就會出現(xiàn)測試字樣才顿,也就是圖片加載失敗的時(shí)候莫湘,該文本就會替換為標(biāo)簽所設(shè)置的文字
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思
1.背景圖為abc.png
2.背景位置為0 0 也就是向右以0 向下以0偏移
3.no-repeat的意思是圖片在框架上不會重復(fù)出現(xiàn),也就是不平鋪郑气。
5.background-size有什么作用? 兼容性如何? 常用的值是?
調(diào)整背景的大小幅垮。
常用的值有:
cover:將圖片覆蓋整個(gè)區(qū)域(取決于你樣式的大小)
contain:圖像擴(kuò)展到合適的區(qū)域
length : 自定義寬高調(diào)整圖片
percentage: 以百分比形式調(diào)整圖片
兼容如下圖:
6.如何讓一個(gè)div水平居中尾组?如何讓圖片水平居中
1.text-align:center 因?yàn)閐iv是塊級元素 可以讓塊級元素內(nèi)的行內(nèi)內(nèi)容居中
2.margin: xxpx auto忙芒; 可以讓整個(gè)div居中
3.margin-left: auto;
margin-right: auto
圖片的話最好用display:block轉(zhuǎn)變?yōu)閴K級元素示弓,然后使用margin: 0px auto;或者margin-left margin-right:auto居中
7.如何設(shè)置元素透明?兼容性呵萨?
opacity:0.x 0是完全透明
兼容性:
8.opacity和 rgba都能設(shè)置透明奏属,有什么區(qū)別
opacity可以設(shè)置整個(gè)元素透明
rgba只是元素的背景顏色透明 就是倘若這個(gè)元素中有文字 文字并不會透明