1、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
簡(jiǎn)介
CSS Sprites(雪碧圖|精靈圖)是一種網(wǎng)頁(yè)圖片應(yīng)用處理方式蒸殿。它允許你將一個(gè)頁(yè)面涉及到的所有零星圖片都包含到一張大圖中去，這樣一來(lái)迂猴，當(dāng)訪(fǎng)問(wèn)該頁(yè)面時(shí)掰读，載入的圖片就不會(huì)像以前那樣一幅一幅地慢慢顯示出來(lái)了。對(duì)于當(dāng)前網(wǎng)絡(luò)流行的速度而言嗤疯，不高于200KB的單張圖片的所需載入時(shí)間基本是差不多的，所以無(wú)需顧忌這個(gè)問(wèn)題闺兢。作用
利用CSS Sprites能很好地減少了網(wǎng)頁(yè)的http請(qǐng)求次數(shù)茂缚，從而大大的提高了頁(yè)面的性能,節(jié)省時(shí)間和帶寬。缺點(diǎn)
CSS Sprites是如此的強(qiáng)大屋谭，但是也存在一些不可忽視的缺點(diǎn)在圖片合并的時(shí)候脚囊，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間桐磁，防止板塊內(nèi)不會(huì)出現(xiàn)不必要的背景悔耘；這些還好，最痛苦的是在寬屏所意，高分辨率的屏幕下的自適應(yīng)頁(yè)面淮逊，你的圖片如果不夠?qū)挘苋菀壮霈F(xiàn)背景斷裂扶踊；CSS Sprites在開(kāi)發(fā)的時(shí)候比較麻煩泄鹏，你要通過(guò)photoshop或其他工具測(cè)量計(jì)算每一個(gè)背景單元的精確位置，這是針線(xiàn)活秧耗，沒(méi)什么難度备籽，但是很繁瑣；幸好騰訊的鬼哥用RIA開(kāi)發(fā)了一個(gè)CSS Sprites 樣式生成工具分井，雖然還有一些使用上的不靈活车猬，但是已經(jīng)比photoshop測(cè)量來(lái)的方便多了，而且樣式直接生成尺锚，復(fù)制珠闰，拷貝就OK！CSS Sprites在維護(hù)的時(shí)候比較麻煩瘫辩，如果頁(yè)面背景有少許改動(dòng)伏嗜，一般就要改這張合并的圖片，無(wú)需改的地方最好不要?jiǎng)臃パ幔@樣避免改動(dòng)更多的css承绸，如果在原來(lái)的地方放不下，又只能（最好）往下加圖片挣轨，這樣圖片的字節(jié)就增加了军熏，還要改動(dòng)css。注意點(diǎn)
CSS Sprites非常值得學(xué)習(xí)和應(yīng)用卷扮，特別是頁(yè)面有一堆ico（圖標(biāo)）荡澎。總之很多時(shí)候大家要權(quán)衡一下利弊画饥，再?zèng)Q定是不是應(yīng)用CSS Sprites衔瓮。
2、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
對(duì)于固定不變的內(nèi)容抖甘，如圖標(biāo)等用背景圖热鞍。對(duì)于可變的內(nèi)容，圖片是和內(nèi)容相關(guān)的衔彻，用圖片
3薇宠、title和 alt屬性分別有什么作用
title是一個(gè)全局屬性，主要是為元素增加一個(gè)小提示或者注釋?zhuān)?dāng)鼠標(biāo)hover到這個(gè)有title
屬性的元素時(shí)艰额，title的值會(huì)在鼠標(biāo)的旁邊顯示出來(lái)澄港。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.content{
}
</style>
</head>
<body>
<div class="content" title="哈哈">
測(cè)試title
</div>
</body>
</html>
alt
主要是當(dāng)圖片無(wú)法加載的時(shí)候用來(lái)替代圖片的文字內(nèi)容。
4柄沮、background: url(abc.png) 0 0 no-repeat;這句話(huà)是什么意思
這句話(huà)是一個(gè)background屬性的簡(jiǎn)寫(xiě)方式回梧，其中對(duì)應(yīng)的值是background-image废岂、bakground-position、background-repeat狱意。
background-image可以為背景引入背景圖片湖苞，接受的值是一個(gè)相對(duì)URL地址或絕對(duì)URL地址
background-position可以指定背景圖片的初始位置，其中0 0表示的是左上角
background-repeat表示的是背景圖片是否重復(fù)详囤，默認(rèn)的值是repeat
-
background: url(abc.png) 0 0 no-repeat;效果
Paste_Image.png
-
background: url(abc.png) 20px 20px repeat;效果
5财骨、background-size有什么作用? 兼容性如何? 常用的值是?
- background-size是指定背景圖片的大小
- background-size是CSS3的屬性
background-size常用的值:length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度藏姐，第二個(gè)值設(shè)置高度隆箩。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"羔杨。 |
| percentage | 以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度捌臊。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度兜材。如果只設(shè)置一個(gè)值娃属，則第二個(gè)值會(huì)被設(shè)置為 "auto"。 |
| cover | 把背景圖像擴(kuò)展至足夠大护姆，以使背景圖像完全覆蓋背景區(qū)域矾端。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。 |
| contain | 把圖像圖像擴(kuò)展至最大尺寸卵皂，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域秩铆。 |
6、如何讓一個(gè)div水平居中灯变？如何讓圖片水平居中
- div居中
如果設(shè)置div寬度殴玛，可以直接設(shè)置margin: 0 auto;
如果不設(shè)置div寬度
div設(shè)置display: inline-block;，然后對(duì)父元素設(shè)置text-align: center;
或者div設(shè)置display: table;添祸，然后設(shè)置margin: 0 auto;
- 圖片水平居中
text-align: center;
7滚粟、如何設(shè)置元素透明? 兼容性？
- 通過(guò)opacity: 0;不透明度這個(gè)屬性來(lái)設(shè)置刃泌，它的屬性值0表示完全透明,1表示完全不透明凡壤。
-
兼容性
Paste_Image.png
8、opacity 和 rgba都能設(shè)置透明耙替，有什么區(qū)別
opacity是對(duì)元素設(shè)置透明度亚侠，可以對(duì)任何元素進(jìn)行設(shè)置。
rgba是通過(guò)顏色alpha通道來(lái)設(shè)置顏色的透明俗扇，只能針對(duì)顏色硝烂。eg：背景顏色，字體顏色铜幽，邊框顏色等顏色屬性
** 本教程版權(quán)歸作者和饑人谷所有滞谢，轉(zhuǎn)載須說(shuō)明來(lái)源旦装！ **
