1、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
簡介
CSS Sprites(雪碧圖|精靈圖)是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。對于當前網(wǎng)絡(luò)流行的速度而言，不高于200KB的單張圖片的所需載入時間基本是差不多的，所以無需顧忌這個問題。作用
利用CSS Sprites能很好地減少了網(wǎng)頁的http請求次數(shù)，從而大大的提高了頁面的性能,節(jié)省時間和帶寬。缺點
CSS Sprites是如此的強大，但是也存在一些不可忽視的缺點在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內(nèi)不會出現(xiàn)不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應(yīng)頁面，你的圖片如果不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂；CSS Sprites在開發(fā)的時候比較麻煩，你要通過photoshop或其他工具測量計算每一個背景單元的精確位置，這是針線活，沒什么難度，但是很繁瑣；幸好騰訊的鬼哥用RIA開發(fā)了一個CSS Sprites 樣式生成工具，雖然還有一些使用上的不靈活，但是已經(jīng)比photoshop測量來的方便多了，而且樣式直接生成，復(fù)制，拷貝就OK！CSS Sprites在維護的時候比較麻煩，如果頁面背景有少許改動，一般就要改這張合并的圖片，無需改的地方最好不要動，這樣避免改動更多的css，如果在原來的地方放不下，又只能（最好）往下加圖片，這樣圖片的字節(jié)就增加了，還要改動css。注意點
CSS Sprites非常值得學(xué)習和應(yīng)用，特別是頁面有一堆ico（圖標）?？傊芏鄷r候大家要權(quán)衡一下利弊，再決定是不是應(yīng)用CSS Sprites。
2、img標簽和CSS背景使用圖片在使用場景上有何區(qū)別
對于固定不變的內(nèi)容，如圖標等用背景圖。對于可變的內(nèi)容，圖片是和內(nèi)容相關(guān)的，用圖片
3、title和 alt屬性分別有什么作用
title是一個全局屬性，主要是為元素增加一個小提示或者注釋，當鼠標hover到這個有title
屬性的元素時，title的值會在鼠標的旁邊顯示出來。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.content{
}
</style>
</head>
<body>
<div class="content" title="哈哈">
測試title
</div>
</body>
</html>
alt
主要是當圖片無法加載的時候用來替代圖片的文字內(nèi)容。
4、background: url(abc.png) 0 0 no-repeat;這句話是什么意思
這句話是一個background屬性的簡寫方式，其中對應(yīng)的值是background-image、bakground-position、background-repeat。
background-image可以為背景引入背景圖片，接受的值是一個相對URL地址或絕對URL地址
background-position可以指定背景圖片的初始位置，其中0 0表示的是左上角
background-repeat表示的是背景圖片是否重復(fù)，默認的值是repeat
-
background: url(abc.png) 0 0 no-repeat;效果
Paste_Image.png
-
background: url(abc.png) 20px 20px repeat;效果
5、background-size有什么作用? 兼容性如何? 常用的值是?
- background-size是指定背景圖片的大小
- background-size是CSS3的屬性
background-size常用的值:length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 設(shè)置背景圖像的高度和寬度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。 |
| percentage | 以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會被設(shè)置為 "auto"。 |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 |
| contain | 把圖像圖像擴展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。 |
6、如何讓一個div水平居中？如何讓圖片水平居中
- div居中
如果設(shè)置div寬度，可以直接設(shè)置margin: 0 auto;
如果不設(shè)置div寬度
div設(shè)置display: inline-block;，然后對父元素設(shè)置text-align: center;
或者div設(shè)置display: table;，然后設(shè)置margin: 0 auto;
- 圖片水平居中
text-align: center;
7、如何設(shè)置元素透明? 兼容性？
- 通過opacity: 0;不透明度這個屬性來設(shè)置，它的屬性值0表示完全透明,1表示完全不透明。
-
兼容性
Paste_Image.png
8、opacity 和 rgba都能設(shè)置透明，有什么區(qū)別
opacity是對元素設(shè)置透明度，可以對任何元素進行設(shè)置。
rgba是通過顏色alpha通道來設(shè)置顏色的透明，只能針對顏色。eg：背景顏色，字體顏色，邊框顏色等顏色屬性
** 本教程版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載須說明來源！ **
