1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用

CSS Sprite是一種網(wǎng)頁圖片的處理技術(shù)，通過將多張圖片整合到一張圖片中寞钥，以減少訪問圖片的次數(shù)和圖片文件的大小烤黍，最終達(dá)到網(wǎng)站性能優(yōu)化的目的。

CSS Sprite將網(wǎng)頁多張小規(guī)格圖片的整合佛析，形成一張包含多張圖片素材的圖片沿后，如：

上圖分別是四張圖片刽锤，如果使用如下代碼設(shè)置導(dǎo)航左側(cè)的icon會(huì)產(chǎn)生4張圖片际歼，在訪問頁面時(shí)會(huì)產(chǎn)生4次request，不利于頁面性能優(yōu)化姑蓝，浪費(fèi)帶寬和內(nèi)存鹅心。

<li><img src="1.gif" alt="img" />football</li>    
<li><img src="2.gif" alt="img" />basketball</li>  
<li><img src="3.gif" alt="img" />badminton</li>  
<li><img src="4.gif" alt="img" />tennis</li>

若使用Css Sprite技術(shù)可以使得4張圖片整合為1張圖，在利用background-position屬性實(shí)現(xiàn)一張圖在同一區(qū)域的重復(fù)使用纺荧。

2.img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別

• img標(biāo)簽屬于html的范疇，本質(zhì)是語義化的顯示圖像的標(biāo)簽
  syntax:
  <img src="xxx.gif" alt="替代文本">
  background-image屬性是css范疇的內(nèi)容占贫，本質(zhì)是為元素設(shè)置背景圖的屬性
  syntax:
  css選擇器{background-image：url();}
• 在頁面加載方式上桃熄，img標(biāo)簽作為文檔內(nèi)容的一部分，會(huì)隨頁面加載時(shí)同時(shí)加載進(jìn)來型奥；
  background-image作為樣式瞳收，要等頁面加載完后背景才開始加載
• img標(biāo)簽屬于頁面內(nèi)容一部分，background-image屬于樣式以起到修飾頁面的作用

綜合以上區(qū)別厢汹，可以得出：image作為語義化標(biāo)簽螟深，圖像是有實(shí)際的表示意義，常常用于形象化的聲明語義烫葬；background-image作為Css屬性之一界弧，圖像只是起到背景裝飾作用凡蜻，不具備實(shí)際語義。

3.title和 alt屬性分別有什么作用

• title屬性作為一種全局變量垢箕，可以作用于所有元素中划栓，常用于顯示元素的提示性信息。當(dāng)鼠標(biāo)移至元素時(shí)条获，會(huì)顯示一段事先設(shè)定好的提示文本茅姜。

• alt屬性作為一種局部變量，作用于input（對(duì)于圖像按鈕）和img元素月匣，常用于顯示圖片無法顯示或禁止顯示時(shí)的替代文本。

  
  

4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思

background: url(abc.png) 0 0 no-repeat;屬于背景樣式奋姿，具體含義是設(shè)置一張圖像地址位于abc.png和不產(chǎn)生平鋪效果的圖片锄开，并且圖像位置以元素左上角為基點(diǎn)圖像的左上角到基點(diǎn)的距離在橫縱坐標(biāo)上不發(fā)生偏移。

5.background-size有什么作用? 兼容性如何? 常用的值是?

• background-size是css3的新背景屬性称诗，規(guī)定背景圖片的尺寸
• 該屬性的兼容性通過查詢caniuse網(wǎng)站如下：

• 常用屬性值包括：

這里有篇文章Background-size很重要較好的解釋好演示了cover和contain的效果區(qū)別。

6.如何讓一個(gè)div水平居中袜香？如何讓圖片水平居中

• div的水平居中可以使用margin或是position屬性來設(shè)置撕予；
• 圖片通過img標(biāo)簽嵌套入div，再使用text-align：center屬性來設(shè)置
  具體演示如下：
  
  
  代碼地址

7.如何設(shè)置元素透明? 兼容性蜈首？

• opacity: 0.5; 這是最重要的实抡，因?yàn)樗荂SS標(biāo)準(zhǔn).該屬性支持Firefox, Safari和 Opera;

• filter:alpha(opacity=50); 這個(gè)是為IE6設(shè)的，可取值在0-100欢策，其它三個(gè)0到1;
• -moz-opacity:0.5; 這個(gè)是為了支持一些老版本的Mozilla瀏覽器;
• -khtml-opacity: 0.5; 這個(gè)為了支持一些老版本的Safari瀏覽器;
  源自CSS透明屬性詳解

8.opacity和 rgba都能設(shè)置透明吆寨，有什么區(qū)別

• opacity是Css屬性的范疇，作用于元素（包括這個(gè)元素和元素內(nèi)部的元素）踩寇；
• rgba是屬性值的范疇啄清，作用于當(dāng)前元素（僅僅是當(dāng)前元素，不影響元素的內(nèi)部元素）

上圖兩個(gè)div的下方banner分別使用opacity和rgba進(jìn)行透明處理俺孙，代碼如下：

.bg-1{
  background:black;
  width:100%;
  height:30%;
  position:absolute;
  bottom:0;
  left:0;
  opacity:0.3;
}
.bg-2{
  background:rgba(0,0,0,0.3);
  width:100%;
  height:30%;
  position:absolute;
  bottom:0;
  left:0;
}

不難發(fā)現(xiàn)辣卒，opacity設(shè)置0.3時(shí)作用于整個(gè)bg-1，并且內(nèi)部的span元素的內(nèi)容也會(huì)受影響睛榄；而rgba僅僅作用于background添寺，內(nèi)部的內(nèi)容未受影響。

那么如果使用opacity同樣實(shí)現(xiàn)rgba的效果懈费，該怎么辦呢计露？一個(gè)常用的方法是將banner和span分離成兄弟元素，banner使用z-index置于span下面

<div class="demo-3">
  <div class="bg-3"> </div>
    <div class="ctn">
    <span>opacity-revise</span>
      </div>
</div>

.demo-3{
  width:150px;
  height:100px;
  background:#ccc;
  margin:10px;
  position:relative;
  font-size:20px;
  color:white;
  text-align:center;
}
.bg-3{
  background:black;
  width:100%;
  height:30%;
  position:absolute;
  bottom:0;
  left:0;
  opacity:0.3;
  z-index:1;
}
.ctn{
  z-index:10;
  width:100%;
  height:30%;
  position:absolute;
  bottom:0;
  left:0;
}

代碼題
使用CSS Sprite 把如下6張圖標(biāo)圖片合并成一張圖片，做出如下效果, 當(dāng) hover 時(shí)背景變色

代碼題地址：here i am !

代碼：

• 第8題-1
• 第8題-2

參考資料

• CSS Sprite初探之原理叉趣、使用
• 再談CSS Sprites（精靈/雪碧）技術(shù)原理和使用
• When to use IMG vs. CSS background-image?
• 論：img和background-image的各種區(qū)別
• About the Title/Alt attributes
• HTML title 屬性
• HTML img 標(biāo)簽的 alt 屬性
• 解決IE瀏覽器部分版本不支持background-size屬性問題
• CSS3 RGBA