CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS雪碧的基本原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中.
作用：
- 減少加載網(wǎng)頁圖片時對服務器的請求次數(shù)
- 提高頁面的加載速度
- 減少鼠標滑過的一些bug
img標簽和CSS背景使用圖片在使用場景上有何區(qū)別
如下場景使用img標簽比較合適：
- 如果圖像是等內(nèi)容的一部分或圖表或人(真正的人,而不是股票圖人)，使用Img標簽加上alt屬性侈净。
- 如果你想打印頁面并且你想要的圖像包括默認情況下使用IMG虹蓄。
- 使用IMG(alt文本)圖像有一個重要的語義時,比如一個警告圖標讲冠。這將確保圖像的意義可以很好的和user-agents溝通,包括屏幕閱讀器。
- 如果你依賴于瀏覽器縮放圖像比例并且可以呈現(xiàn)不錯的效果時使用IMG饰剥。
- 如果配合 z - index 伸展背景圖像來填補它的整個窗口時使用IMG浆西。
- 使用img代替有背景圖像可以顯著提高性能的動畫背景洋魂。
- IMG會首先加載因為src在html文件本身中而在有背景圖像源是樣式表中引入的圖像聋亡，加載樣式表加載后,延遲加載的網(wǎng)頁肘习。
如下場景使用background-image屬性比較合適： - 如果圖像不是內(nèi)容的一部分時使用backgrond-image。
- 當圖像代替文本使用時使用backgrond-image杀捻。
- 如果你想打印頁面并且你不想要的圖像包括默認情況下使用backgrond-image井厌。
- 如果需要縮短下載時間通過CSS sprites 時使用backgrond-image。
- 如果你只需要展示圖像的一部分通過CSS sprites致讥，時使用backgrond-image仅仆。
- 如果你需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時使用backgrond-image。
title和 alt屬性分別有什么作用
在img標簽中alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息垢袱，它會直接輸出在原本加載圖片的地方墓拜，而title屬性是在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了
background: url(abc.png) 0 0 no-repeat;這句話是什么意思
設置一張地址為abc.png的背景圖片请契，其相對于父容器便宜量為0咳榜，圖片不平鋪
background-size有什么作用? 兼容性如何? 常用的值是?
用于規(guī)定背景圖的大小
Paste_Image.png
length
設置背景圖像的高度和寬度。
第一個值設置寬度爽锥，第二個值設置高度涌韩。
如果只設置一個值，則第二個值會被設置為 "auto"氯夷。
percentage
以父元素的百分比來設置背景圖像的寬度和高度臣樱。
第一個值設置寬度，第二個值設置高度腮考。
如果只設置一個值雇毫，則第二個值會被設置為 "auto"。
cover
把背景圖像擴展至足夠大踩蔚，以使背景圖像完全覆蓋背景區(qū)域棚放。
背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain
把圖像圖像擴展至最大尺寸馅闽，以使其寬度和高度完全適應內(nèi)容區(qū)域飘蚯。
如何讓一個div水平居中？如何讓圖片水平居中
div水平居中用margin：0 auto捞蛋；
圖片水平居中設置text－align：center孝冒；
如何設置元素透明? 兼容性？
opacity:0~1;0為全透明拟杉，1為原圖庄涡。
Paste_Image.png
opacity和 rgba都能設置透明，有什么區(qū)別搬设？
opacity會影響所有后代元素穴店，rgba不會影響后代元素撕捍。
