一蒸健，CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
答：把小圖標和背景圖合并到一張圖，通過background-position定位圖片使用，減少網(wǎng)絡請求个束，降低服務器壓力蘸炸，提高頁面加載速度躬络。
二，img標簽和CSS背景使用圖片在使用場景上有何區(qū)別
答：img多用在可變化搭儒，可點擊的圖片上穷当，如果圖像是內(nèi)容的一部分，用img淹禾，有時候常用在按鈕或者超鏈接上馁菜。
css背景圖用于不需要點擊，以及變換次數(shù)較少的標簽铃岔，如icon等等
三汪疮，title和 alt屬性分別有什么作用
答：
- alt 此屬性的實質(zhì)作用是圖片在無法正確顯示的時候起到文本替代的作用,如果想在鼠標滑過時顯示提示,應該用title屬性峭火。alt只能運用于area input和img標簽
- title 鼠標滑過時顯示的文字提示，當然不必要所有的img標簽都加此屬性智嚷，比較重要或者說用戶會體驗到的圖片內(nèi)容建議一定要加此屬性卖丸。 title為全局屬性，可以應用到任何的元素上
示例
<img src="xxx.png" alt="我是圖片" title="逗你玩" />
效果
圖片無法顯示時盏道，alt="我是圖片",
不管圖片是否顯示稍浆，都會出現(xiàn)title="逗你玩"
四，background: url(abc.png) 0 0 no-repeat;這句話是什么意思
答：是以下的縮寫
-
background-image:url()添加要使用的背景圖片地址 -
background-position:規(guī)定背景圖像的位置,縱向和橫向的偏移量 -
background-repeat:規(guī)定如何重復背景圖像
background: url(abc.png) 0 0 no-repeat;
所以猜嘱，這句話的意思是background-image:url(abc.png)背景圖片的路徑是當前目錄下的abc.png文件衅枫，background-position 背景圖片的位置是0px 0px 背景圖像偏移為0，也就是在頁面的左上角部分
background-repeat:背景圖片不重復朗伶。
五弦撩，background-size有什么作用? 兼容性如何? 常用的值是?
答：background-size:用來設置背景圖片的尺寸
常用值：
- auto 默認值；
- px 設置大小论皆，例如：200px 300px (寬 高)益楼，如果只設置一個值，則第二個值會被設置為 “auto”纯丸；
- 百分比偏形。例如： 50% 50%（父元素的寬 高 比），如果只設置一個值觉鼻，則第二個值會被設置為 “auto”俊扭；
- cover 背景圖無限擴大使其填滿背景區(qū)域，背景圖某些部分可能不顯示坠陈；
- contain 使背景圖完全展示在背景區(qū)域萨惑，背景區(qū)域會有空白。
六仇矾，如何讓一個div水平居中庸蔼？如何讓圖片水平居中
答：
div水平居中： margin:0 auto;
圖片水平居中：
- 圖片外增加一個父容器，在父容器中通過
text-align:center居中;
- 通過
display:block;margin:0 auto實現(xiàn)水平居中贮匕。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.t1{
text-align: center;
}
.t3 {
display: block;
margin:0 auto;
}
</style>
</head>
<body>
<div class="t1">
<img src="11.jpg" alt="dog">
</div>
<img class="t3" src="11.jpg" alt="dog">
</body>
</html>````
##### 七姐仅，如何設置元素透明? 兼容性？
答：使用 opacity：（0-1）來設定刻盐，其值越靠近0越透明掏膏。
IE8以下的瀏覽器不兼容《匦浚可用以下方法補充：`filter:alpha(opacity=0~100);`來設定馒疹，其值越靠近0越透明。
opacity: 0~1; /IE8部分支持,9以及以上都支持/
filter: alpha(opacity=40); /適用于IE 8 以及更早版本/
>示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.t1 {
background-color:red;
opacity: 0.5;
filter: alpha(opacity=50);
}
.t2 {
background-color:red;
opacity: 0.2;
filter: alpha(opacity=20);
}
.t3 {
background-color:red;
opacity: 0.8;
filter: alpha(opacity=80);
}
</style>
</head>
<body>
<div class="t1">
<h3>我是半透明的</h3>
</div>
<div class="t2">
<h3>我是透明的</h3>
</div>
<div class="t3">
<h3>我是不透明的</h3>
</div>
</body>
</html>
##### 八乙墙，`opacity` 和 `rgba`都能設置透明颖变，有什么區(qū)別
答：
1. RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道生均，alpha通道是**不透明度**，即腥刹，如果一個元素的alpha通道數(shù)值為0%（或0）马胧，那該元素就是**完全透明**的（也就是看不見的，但是可以透過該元素看到該元素下的元素）衔峰，數(shù)值為100%（或255）時則意味著該元素完全**不透明**漓雅。
- opacity屬性是css3的屬性，也可以實現(xiàn)透明效果.`opacity:0~1` 1為完全不透明朽色，0為完全透明 .
**區(qū)別：**
opacity作用于元素，以及元素內(nèi)的所有子元素的透明度组题，子元素會繼承葫男；
rgba()只作用于元素的顏色或其背景色，相應子元素則不會繼承崔列。
> 示例
`.rgba{
background: rgba(255,0,0,0.5);
}
.opacity{
background: red;
opacity: 0.5;
}`
` <div class="rgba">
我是RGBA梢褐，只管我自己
</div>
<div class="opacity">
我是opacity，還管我里面的元素
</div>`
