1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS Sprite(雪碧圖|精靈圖)指該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，從而減少你的網(wǎng)站的HTTP請(qǐng)求數(shù)量，然后利用css的背景定位來顯示需要顯示的圖片部分。
作用：
- 1.減少加載網(wǎng)頁圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)。
- 2.提高頁面的加載速度。
- 3.減少鼠標(biāo)滑過的一些bug。
參考css雪碧
2.img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
如果一張圖片是網(wǎng)頁內(nèi)容的一部分，就該用img標(biāo)簽，否則就建議用 CSS 背景圖。
主要區(qū)別在于img標(biāo)簽一般用于需要單獨(dú)點(diǎn)擊生效的圖片，這些圖片一般是從后臺(tái)傳入的，可以動(dòng)態(tài)交互。
css背景一般用于靜態(tài)不變的圖片?？梢允琼撁鍸OGO等。
舉例：
在京東首頁上，經(jīng)常變化的圖片用到img。和鏈接文字連在一起的，用背景圖片。
3.title和 alt屬性分別有什么作用
title屬性是為標(biāo)簽提供額外的信息說明，例如<a href="xx" title="鏈接">這是鏈接</a>，把鼠標(biāo)放在鏈接上時(shí)，會(huì)顯示title的內(nèi)容，以達(dá)到補(bǔ)充說明或者提示的效果。
而alt屬性是起替代作用的。例如圖片<img src="abc.png" alt="圖片">，當(dāng)圖片來源出錯(cuò)無法正常顯示時(shí)，顯示alt屬性的值。alt是替代圖像而不是提供說明。alt屬性還可以用于搜索引擎優(yōu)化。因?yàn)樗阉匾媸菬o法直接讀取圖像的信息的，alt可以為其提供文字信息所以對(duì)搜索引擎比較友好。
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思
背景圖片是和html文檔同一個(gè)文件夾的abc.png，這個(gè)圖片在這個(gè)元素的左上角，而且是不被重復(fù)的?？梢耘e個(gè)例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background</title>
<style>
div {
width:500px;
height:500px;
border: 1px solid red;
background: url(abc.png) 0 0 no-repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果：
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size 屬性規(guī)定背景圖像的尺寸。
兼容性由圖知，IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-size 屬性。
常用的值:
background-size: length/percentage/cover/contain;
| 值 | 描述 |
|---|---|
| length | 設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為auto。 |
| percentage | 以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 auto。 |
| cover | 把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 |
| contain | 把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。 |
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-size</title>
<style>
div {
width: 250px;
height: 350px;
background: url(abc.png) no-repeat;
margin-top: 20px;
border: 1px solid red;
display: inline-block;
}
img {
display: block;
}
.item1 {
background-size: 400px 300px;
}
.item2 {
background-size: 100% 100%;
}
.item3 {
background-size: cover;
}
.item4 {
background-size: contain;
}
</style>
</head>
<body>
<img src="abc.png" alt="圖片">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
</body>
</html>
效果：
最上面的是原圖片，原圖片大小寬400px，高300px。
.item1 {
background-size: 400px 300px;
}
設(shè)置背景的寬高為px時(shí)，圖片大小變化，但是因?yàn)閐iv的寬高有限制，所以只顯示出在div范圍內(nèi)的圖像。
.item2 {
background-size: 100% 100%;
}
設(shè)置寬高為100%時(shí)，正好充滿整個(gè)div空間。
.item3 {
background-size: cover;
}
設(shè)置為cover時(shí)，圖像被放大，使高度完全覆蓋空間，但是圖片寬度此時(shí)大于div的寬度，不能完全顯示。
.item4 {
background-size: contain;
}
設(shè)置為contain時(shí)，圖片完全顯示在div中，但因圖片原始寬度400px比div的寬度250px要大，為使圖片完全顯示，圖片進(jìn)行了縮放，div中有空白。
cover、contain設(shè)置背景圖片的size是使圖片按原始比例縮放的，如果把上述div的寬度設(shè)置為200px,高度設(shè)置為150px,則設(shè)置cover，contain屬性時(shí)，背景圖片如下圖所示：
顯示是一樣的。
6.如何讓一個(gè)div水平居中？如何讓圖片水平居中
讓一個(gè)div水平居中，可以使用margin: xx auto;，先設(shè)置div的寬度，再設(shè)置div的左右外邊距是auto。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
width:300px;
height: 200px;
border: 1px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
饑人谷
</div>
</body>
</html>
效果：
讓圖片水平居中，對(duì)它的父元素設(shè)置
text-align:center;。舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
div {
width:500px;
height: 500px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="abc.png" alt="圖片">
</div>
</body>
</html>
效果：
7.如何設(shè)置元素透明? 兼容性？
opacity屬性用來設(shè)置元素的不透明度。取值0-1。0代表完全透明，1代表完全不透明。
兼容性：所有瀏覽器都支持 opacity 屬性。但I(xiàn)E8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。
8.opacity和 rgba都能設(shè)置透明，有什么區(qū)別
主要區(qū)別是opacity設(shè)置透明，對(duì)其子元素也適應(yīng)。rgba設(shè)置透明只對(duì)其本身起作用。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.opacity {
width: 100px;
height: 100px;
background: #0f0;
opacity: 0.3;
color: #000;
margin-bottom: 10px;
}
.alpha {
width: 100px;
height: 100px;
background:rgba(0,255,0,0.3);
color: #000;
}
</style>
</head>
<body>
<div class="opacity">
text
</div>
<div class="alpha">
text
</div>
</body>
</html>
效果:
從圖中可以看出設(shè)置opacity屬性的div內(nèi)部文本的透明度也改變了。而rgba則沒有改變文本的透明度。
本文版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載請(qǐng)注明出處
