一充择、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
- css雪碧圖又叫css精靈或css sprite，是一種背景圖片的拼合技術(shù)魄幕。
- 用css雪碧圖苛秕，能夠減少頁面的請求數(shù)、降低圖片占用的字節(jié)螟蒸，以此來達到提升頁面訪問速度的目的盒使。
二、img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別
- 使用img的場景
- 如果你希望別人打印頁面時候包含這張圖片請使用 img 標(biāo)簽七嫌。
- 當(dāng)這張圖片有非常有意義的語義少办，比如警告圖標(biāo)，請使用img標(biāo)簽及它的alt屬性诵原。這樣意味著你可以向所有的用戶終端現(xiàn)實他的意義英妓。
- 假如該圖片是變化的不是固定的，圖片跟內(nèi)容是相關(guān)的則用img绍赛。
- 使用background-image的場景
- 如果圖片不是內(nèi)容的一部分使用 background-image
- 如果使用圖片替換文字請使用 background-image
- 如果你不希望別人打印頁面時候包含這張圖片請使用 background-image
- 如果你想改善加載時間 使用 CSS sprites
- 如果你只想用一張圖片的一部分 請使用 CSS sprites
- 用background-image 以及 background-size:cover 拉伸填充整個窗口
三蔓纠、title 和 alt 屬性分別有什么作用
- title 應(yīng)用在img時，鼠標(biāo)滑過時顯示的文字提示吗蚌，用戶體驗上很重要腿倚；
應(yīng)用在a時，是網(wǎng)站標(biāo)題蚯妇； - alt 此屬性的實質(zhì)作用是圖片在無法正確顯示的時候起到文本替代的作用敷燎。
四、background: url(abc.png) 0 0 no-repeat;這句話是什么意思
- 在x:0 y:0 的位置插入不重復(fù)的背景圖片abc.png
五箩言、background-size有什么作用? 兼容性如何? 常用的值是?
- background-size用作規(guī)定背景圖片的尺寸大小硬贯。
-
在IE8以及以前不兼容，其他大部分都可使用陨收；
de1b97f6-fb37-4771-8883-34a1d41afe23.png - 常用的值：
contain: 把圖像圖像擴展至最大尺寸饭豹，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
cover: 把背景圖像擴展至足夠大务漩，以使背景圖像完全覆蓋背景區(qū)域拄衰。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
六菲饼、如何讓一個div水平居中肾砂？如何讓圖片水平居中
- 通過設(shè)置magin{0 auto}樣式來讓div水平居中
- 圖片以及文本可以通過設(shè)置text-align：center樣式來水平居中列赎；
七宏悦、如何設(shè)置元素透明? 兼容性镐确？
- 可使用 opacity：（0-1）來設(shè)定，其值越靠近0越透明饼煞。IE8以下的瀏覽器不兼容源葫。可用以下方法補充：filter: alpha(opacity=0~100); background: rgba（255,0,0,0~1）來設(shè)定砖瞧，其值越靠近0越透明;IE8 以下的瀏覽器不兼容息堂；
八、opacity和 rgba都能設(shè)置透明块促，有什么區(qū)別
- opacity設(shè)置透明荣堰，子元素會繼承，會使整體都透明
- rgba子元素則不會繼承,一般用于設(shè)置背景的透明度
