CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用?
為了提高網頁的性能，減少加載次數(shù)（減少http請求次數(shù)）猴伶，將一些不會經常隨網站內容變化的小圖標，集中放在一張大圖上，將這個圖應作為background-image 嵌入頁面中，在需要相關圖標時鸡号，根據(jù)background-position設置坐標值，達到目的须鼎。這張集中了網站小圖標的大圖就是CSS 雪碧圖鲸伴。
img標簽和CSS背景使用圖片在使用場景上有何區(qū)別府蔗？
使用css背景的場景：
- 圖片不會因用戶不同而顯示不同。
- 圖片不需要經常變動汞窗。
3.如果需要為不同的屏幕分辨率展示不同的圖像使用 media查詢時使用backgrond-image姓赤。
使用img標簽的場景： - 如果圖形是內容的一部分，使用Img標簽加上alt屬性仲吏。
- 如果你依賴于瀏覽器縮放圖像比例并且可以呈現(xiàn)不錯的效果時使用IMG不铆。
- 如果配合 z - index 伸展背景圖像來填補它的整個窗口時使用IMG。
- IMG會首先加載因為src在html文件本身中而在有背景圖像源是樣式表中引入的圖像裹唆，加載樣式表加載后,延遲加載的網頁狂男。
title和alt屬性分別有什么作用?
兩者區(qū)別及作用：
- ** 含義不同 **alt是當圖片不存在時的替代文字;title是對圖片的描述與進一步說明。
- ** 在瀏覽器中的表現(xiàn)不同 ** 在firefox和ie8中品腹，當鼠標經過圖片時title值會顯示，而alt的值不會顯示;只有在ie6中红碑，當鼠標經過圖片時title和alt的值都會顯示舞吭。
- ** SEO優(yōu)化 ** 搜索引擎對圖片意思的判斷，主要靠alt屬性析珊。
background: url(abc.png) 0 0 no-repeat;這句話是什么意思羡鸥？
url 指背景圖引用地址
0 0 指背景圖左上角被引用的坐標
no-repeat 指背景圖不重復鋪設
background-size有什么作用? 兼容性如何? 常用的值是?
background-size 屬性規(guī)定背景圖像的尺寸。
background-size兼容性
background-size: length|percentage|cover|contain;
- length 設置背景圖像的高度和寬度忠寻。如果只設置一個值惧浴，則第二個值會被設置為 "auto"。
- percentage 以父元素的百分比來設置背景圖像的寬度和高度奕剃。
- cover 把背景圖像擴展至足夠大衷旅，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中纵朋。
-
contain 把圖像圖像擴展至最大尺寸柿顶，以使其寬度和高度完全適應內容區(qū)域。
background-size區(qū)別
如何讓一個div水平居中操软？如何讓圖片水平居中?
div 水平居中
E{ margin : 0 auto ;}
圖片水平居中嘁锯，在其塊級父元素中設置:
div { text-align：center；}
如何設置元素透明? 兼容性聂薪？
一般隱藏一個元素家乘，多會設置opacity：0%，這樣綁定在這個元素上的事件仍然有效藏澳。
opacity兼容性
opacity和rgba都能設置透明仁锯，有什么區(qū)別?
opactiy可以應用于圖片和文字。
RBGA只能表示背景的不透明度笆载。
opactiy和rgba區(qū)別
opacity會繼承父元素的 opacity 屬性扑馁，而RGBA設置的元素的后代元素不會繼承不透明屬性涯呻。
原理詳見：RGBA與Opacity差異小解
