1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
- CSS Sprites是一種網(wǎng)頁圖片應(yīng)用處理方式。它允許你將一個(gè)頁面涉及到的所有零星圖片都包含到一張大圖中去币狠，這樣一來，當(dāng)訪問該頁面時(shí)砾层，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來了漩绵。
- CSS Sprites的原理其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的“background-image”肛炮，“background- repeat”止吐，“background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置侨糟。
作用
- 利用CSS Sprites能很好地減少了網(wǎng)頁的http請(qǐng)求碍扔，從而大大的提高了頁面的性能
- CSS Sprites能減少圖片的字節(jié)，例如3張圖片合并成1張圖片的字節(jié)總是小于這3張圖片的字節(jié)總和
- CSS Sprites解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾秕重，只需對(duì)一張集合的圖片上命名就可以了不同，不需要對(duì)每一個(gè)小元素進(jìn)行命名，從而提高了網(wǎng)頁的制作效率溶耘。
- 更換風(fēng)格方便二拐，只需要在一張或少?gòu)垐D片上修改圖片的顏色或樣式，整個(gè)網(wǎng)頁的風(fēng)格就可以改變凳兵。維護(hù)起來更加方便
2.img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
img標(biāo)簽一般用于可以點(diǎn)擊跳轉(zhuǎn)鏈接或者可以個(gè)性化定制改變（如登陸頭像）的圖片百新，css背景一般是固定不變的內(nèi)容（如logo），點(diǎn)擊后不會(huì)跳轉(zhuǎn)到新頁面
css背景一般用于靜態(tài)不變的圖片留荔∫魉铮可以是頁面LOGO等。
3.title 和 alt屬性分別有什么作用
- title 屬性規(guī)定關(guān)于元素的額外信息,這些信息通常會(huì)在鼠標(biāo)移到元素上時(shí)顯示一段提示文本
title 屬性常與 form 以及 a 元素一同使用聚蝶，以提供關(guān)于輸入格式和鏈接目標(biāo)的信息 - alt 屬性是一個(gè)必需的屬性杰妓，它規(guī)定在圖像無法顯示時(shí)的替代文本
當(dāng)圖片無法顯示時(shí)，就會(huì)變成下面這個(gè)樣子：
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思
設(shè)置圖片abc為背景圖片碘勉，位置為x軸方向0px巷挥，y軸方向0px（左上角是 0 0），不重復(fù)圖片
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size描述背景圖片的大小验靡，它的類型可以是像素（px）倍宾、百分比（%）或是auto雏节，還可以是cover和contain。第一個(gè)值為背景圖width高职，另外一個(gè)值用于指定背景圖上的height钩乍，如果只設(shè)定1個(gè)值，則第2個(gè)默認(rèn)為auto怔锌，但當(dāng)值為cover和contain時(shí)除外寥粹。
- cover：
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: cover;
}
保持圖像的寬高比例，將圖片縮放到正好完全覆蓋定義的背景區(qū)域埃元，其中有一邊和背景相同涝涤。
- contain：
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: contain;
}
保持圖像的寬高比例，將圖片縮放到寬或者高正好適應(yīng)定義背景的區(qū)域岛杀，但背景仍在定義的區(qū)域之內(nèi)阔拳，被包含。
- length:
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: 130px 180px;
}
這里為背景圖片設(shè)置寬高类嗤，圖片會(huì)直接被拉伸或縮放糊肠，不保持原來的比例。如果只設(shè)置一個(gè)數(shù)值土浸，另外一個(gè)值默認(rèn)為auto罪针，它將按圖片原比例來伸縮。
- percentage:
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: 50% 50%;
}
這里需要特別注意一下黄伊，圖片大小不是按背景圖片大小的百分?jǐn)?shù)來計(jì)算的，而是裝載背景圖的元素的百分比來計(jì)算派殷。
6.如何讓一個(gè)div水平居中还最？如何讓圖片水平居中
- div水平居中
div {
margin: 0 auto;
}
- 圖片水平居中
給圖片的父級(jí)設(shè)置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.如何設(shè)置元素透明? 兼容性？
1.使用rgba：rgba(red, green, blue, alpha)毡惜。
2.設(shè)置opacity：0~1
8.opacity 和 rgba都能設(shè)置透明拓轻，有什么區(qū)別
opacity作用于元素內(nèi)的所有內(nèi)容，rgba作用于元素的顏色或背景色
