一梦裂、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用菠剩？
- CSS雪碧 即CSS Sprite,也有人叫它CSS精靈戳表，是一種CSS圖像合并技術(shù)，該方法是將小圖像和背景圖片合并到一張圖片上歌懒，然后利用css的背景定位來(lái)顯示的圖片部分啦桌。
2.作用：
- 減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)；
- 提高頁(yè)面的加載速度歼培；
- 減少鼠標(biāo)滑過(guò)的一些bug.
二震蒋、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別茸塞？
如果一張圖片是網(wǎng)頁(yè)內(nèi)容的一部分，就該用img,否則建議用CSS背景圖查剖。要注意logo是否屬于網(wǎng)頁(yè)內(nèi)容的一部分钾虐。
示例：
如圖：百度logo就是img，二維碼就是CSS背景圖呈現(xiàn)出來(lái)的笋庄。
在網(wǎng)頁(yè)加載過(guò)程中效扫，以CSS背景圖存在的圖片會(huì)等到結(jié)構(gòu)加載完成之后開(kāi)始加載，而html中的標(biāo)簽img是網(wǎng)頁(yè)結(jié)構(gòu)的一部分直砂，會(huì)在加載結(jié)構(gòu)的過(guò)程中加載菌仁，如果引入一個(gè)很大的圖片，在圖片下載完成之前静暂，img內(nèi)容都不顯示济丘。但是CSS引入同樣的圖片，網(wǎng)頁(yè)內(nèi)容和結(jié)構(gòu)加載完成洽蛀，才開(kāi)始加載背景圖片摹迷，不會(huì)影響用戶瀏覽網(wǎng)頁(yè)內(nèi)容。
三郊供、title和 alt屬性分別有什么作用峡碉？
alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說(shuō)明的。且長(zhǎng)度必須少于100個(gè)應(yīng)為字符或者用戶必須保證替換文字盡可能的短驮审。這包括那些使用本來(lái)就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶鲫寄，視覺(jué)障礙的用戶和使用屏幕閱讀器的用戶等。
title屬性為設(shè)置該屬性的元素提供建設(shè)性的信息疯淫。使用title屬性提供非本質(zhì)的額外信息地来。
四、background: url(abc.png) 0 0 no-repeat;這句話是什么意思峡竣？
background:url(abc.png) 0 0 no-repeat;設(shè)置了背景圖片的屬性：
background-img:url(abc.png)指定要使用的背景圖片;
background-position:0 0:指定背景圖片的位置靠抑；
background-repeat:no-repeat:指定背景圖片僅顯示一次。
示例：
五适掰、background-size有什么作用? 兼容性如何? 常用的值是?
background-size:用于控制背景圖片的大小五嫂。
兼容性：
| 瀏覽器 | background-size |
|---|---|
| Firefox 3.6, Firefox 4 | 支持 |
| Chorme10 | 支持 |
| IE6致燥，IE7傀蚌，IE8 | 不支持 |
| IE9 | 支持 |
| Opera10,Opera11 | 支持 |
常用的值是：
- auto:此值為默認(rèn)值亿卤，保持背景圖片的原始寬度和高度峭判；
示例：
-
<length>:用于給background-size一個(gè)具體的值菩帝；
示例：
其中第一個(gè)值是給背景圖片添加了寬度润文；第二個(gè)值是給背景圖片添加了高度值
-
<percentage>
示例：
-
cover:圖片會(huì)放大到適合容器的尺寸
示例：
-
contain
示例：
六冷尉、如何讓一個(gè)div水平居中川队？如何讓圖片水平居中力细？
使得div水平居中使用margin:0 auto;示例：
圖片水平居中：
在它所在的塊級(jí)元素中添加text-align:center;
示例：
七睬澡、如何設(shè)置元素透明? 兼容性?
可以使用： - css3的opacity:x,x的取值從0-1
- css3的rgba(red green blue alpha),alpha的取值從0-1
兼容性：
opacity
| 瀏覽器 | 兼容性 |
|---|---|
| IE6,7,8 | 不支持 |
| IE9,10,11 | 支持 |
| chrome2.0.x | 支持 |
| Firefox3.0.10,3.5 | 支持 |
rgba
| 瀏覽器 | 兼容性 |
|---|---|
| IE6,7,8 | 不支持 |
| IE9,10,11 | 支持 |
| chrome2.0.x | 支持 |
| Firefox3.0.10,3.5 | 支持 |
八、opacity和 rgba都能設(shè)置透明眠蚂，有什么區(qū)別煞聪？
opacity會(huì)繼承父元素的 opacity 屬性，而RGBA設(shè)置的元素的后代元素不會(huì)繼承不透明屬性逝慧。
示例：
參考：
- CSS background-repeat 屬性
- CSS background 屬性
- When to use IMG vs. CSS background-image?
- 翻譯 – CSS3 Backgrounds相關(guān)介紹
- CSS3 Background-size
注：版權(quán)歸本人所有昔脯，若有轉(zhuǎn)載請(qǐng)注明來(lái)源
