1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
- CSS Sprites是一種網頁圖片應用處理方式。它允許你將一個頁面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來，當訪問該頁面時，載入的圖片就不會像以前那樣一幅一幅地慢慢顯示出來了。
- CSS Sprites的原理其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。
作用
- 利用CSS Sprites能很好地減少了網頁的http請求，從而大大的提高了頁面的性能
- CSS Sprites能減少圖片的字節，例如3張圖片合并成1張圖片的字節總是小于這3張圖片的字節總和
- CSS Sprites解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
- 更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便
2.img標簽和CSS背景使用圖片在使用場景上有何區別
img標簽一般用于可以點擊跳轉鏈接或者可以個性化定制改變（如登陸頭像）的圖片，css背景一般是固定不變的內容（如logo），點擊后不會跳轉到新頁面
css背景一般用于靜態不變的圖片。可以是頁面LOGO等。
3.title 和 alt屬性分別有什么作用
- title 屬性規定關于元素的額外信息,這些信息通常會在鼠標移到元素上時顯示一段提示文本
title 屬性常與 form 以及 a 元素一同使用，以提供關于輸入格式和鏈接目標的信息 - alt 屬性是一個必需的屬性，它規定在圖像無法顯示時的替代文本
當圖片無法顯示時，就會變成下面這個樣子：
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思
設置圖片abc為背景圖片，位置為x軸方向0px，y軸方向0px（左上角是 0 0），不重復圖片
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size描述背景圖片的大小，它的類型可以是像素（px）、百分比（%）或是auto，還可以是cover和contain。第一個值為背景圖width，另外一個值用于指定背景圖上的height，如果只設定1個值，則第2個默認為auto，但當值為cover和contain時除外。
- cover：
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: cover;
}
保持圖像的寬高比例，將圖片縮放到正好完全覆蓋定義的背景區域，其中有一邊和背景相同。
- contain：
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: contain;
}
保持圖像的寬高比例，將圖片縮放到寬或者高正好適應定義背景的區域，但背景仍在定義的區域之內，被包含。
- length:
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: 130px 180px;
}
這里為背景圖片設置寬高，圖片會直接被拉伸或縮放，不保持原來的比例。如果只設置一個數值，另外一個值默認為auto，它將按圖片原比例來伸縮。
- percentage:
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: 50% 50%;
}
這里需要特別注意一下，圖片大小不是按背景圖片大小的百分數來計算的，而是裝載背景圖的元素的百分比來計算。
6.如何讓一個div水平居中？如何讓圖片水平居中
- div水平居中
div {
margin: 0 auto;
}
- 圖片水平居中
給圖片的父級設置text-algin:center樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
div{
width: 800px;
height: 600px;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
</div>
</body>
</html>
圖片水平居中
7.如何設置元素透明? 兼容性？
1.使用rgba：rgba(red, green, blue, alpha)。
2.設置opacity：0~1
8.opacity 和 rgba都能設置透明，有什么區別
opacity作用于元素內的所有內容，rgba作用于元素的顏色或背景色
