2016/05/18

@hunger 說：

• CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用

主要是指將多個(gè)小圖標(biāo)合成為一張大圖，通過對(duì)background-position的設(shè)置顯示不同的圖標(biāo)，從而減少網(wǎng)絡(luò)請(qǐng)求，只用加載一張圖片，再用到的時(shí)候是用緩存的方式

• img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別

img一般用在內(nèi)容可變的，經(jīng)常更換的地方，比如輪播圖，css背景圖一般用在內(nèi)容固定的地方，比如一個(gè)網(wǎng)站的logo圖

0_1463325996297_upload-6a8412cf-0c7f-474f-ae18-2fe2da794600

• title 和 alt屬性分別有什么作用

title屬性是給鏈接文字提示和當(dāng)鼠標(biāo)懸停在圖片上出現(xiàn)的文字提示，alt屬性是當(dāng)圖片加載失敗時(shí)，出現(xiàn)的提示

0_1463326560300_upload-1ff030b9-e948-4ae9-acf8-f05f6e9b78bf

0_1463326741774_upload-df22fbd5-6642-44a6-9670-d8a452850392

• background: url(abc.png) 0 0 no-repeat;這句話是什么意思

意思是背景圖是為abc.png的圖片，在水平方向和垂直方向上偏移量為0，圖片不重復(fù)

• background-size有什么作用? 兼容性如何? 常用的值是?

• background-size用于設(shè)置背景圖片的尺寸。

• 兼容性：

  
  
  0_1463360530778_upload-95d52c08-9109-4288-96c3-690bc33f4c41

常用的值有background-size: length|percentage|cover|contain;

• length:設(shè)置背景圖像的寬度和高度，第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度，如果只設(shè)置一個(gè)值，第二個(gè)值會(huì)被設(shè)置為auto。

  
  
  0_1463409750211_upload-deba3a66-0203-4d47-ab6b-3048d591bada

• percentage:以父元素的百分比來設(shè)置背景的寬度和高度，第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度，如果只設(shè)置一個(gè)值，第二個(gè)值會(huì)被設(shè)置為auto

  
  
  0_1463409812406_upload-10df1258-e9b1-40a5-a562-c3948fd4bfeb

• cover:把背景圖像擴(kuò)展至足夠大，使背景圖完全覆蓋背景區(qū)域。背景的某些部分也許無法在背景定位區(qū)域內(nèi)。

  
  
  0_1463409900017_upload-6aa8e3c6-68a1-46f0-8276-64b0c014dcd9

• contain:把背景圖像擴(kuò)展至最大尺寸，是其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。

  
  
  0_1463410037639_upload-e7bb4bf6-35a6-4f45-8ae0-613d98e081e7

• 如何讓一個(gè)div水平居中？如何讓圖片水平居中

讓div水平居中，可以用margin:0 auto;
讓圖片水平居中，可以用text-align:center;

0_1463410534039_upload-bb77b0a8-f04a-41b0-be57-98149ffad5d7

0_1463410556617_upload-932a47aa-0142-4771-bb57-3fa55db404ba

• 如何設(shè)置元素透明? 兼容性？

兼容性：

0_1463413284843_upload-a8a9d544-3068-4229-bc1e-a7311a98ff6e

opacity:0~1;
filter:alpha(opacity=0~100);(對(duì)于IE8和更早的版本)

0_1463411373945_upload-17a41552-e3f1-4131-8850-fdc9f2280a52

0_1463411434039_upload-89046460-841b-423a-99a2-f9e39d5ce3d7

• opacity 和 rgba都能設(shè)置透明，有什么區(qū)別

• opacity設(shè)置透明，整個(gè)容器都會(huì)變透明，包括其中的文字，圖片都會(huì)透明
• rgba只是背景顏色透明，但是其中其他的元素還在正常顯示的
  
  0_1463413050012_upload-bb680e90-771d-4012-b5d9-2ed5fe63f118
  
  代碼鏈接