一妆艘、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用？
CSS Sprite把多個背景圖片合成為一張收恢，通過background-positiong定位圖片的技術(shù)
CSS Sprite原理是把你的網(wǎng)站上用到的一些圖片整合到一張單獨的圖片中武契，從而減少你的網(wǎng)站的HTTP請求數(shù)量
CSS Sprite作用
減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù)
提高頁面的加載速度
減少鼠標(biāo)滑過的一些bug
整理自百度百科
二、img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別发笔？
- img標(biāo)簽的使用場景是如果一張圖片屬于網(wǎng)頁內(nèi)容的一部分盟萨，那么則該用img標(biāo)簽，以及img標(biāo)簽也多用于網(wǎng)頁中經(jīng)常更換的圖片部分了讨，比如捻激，購物網(wǎng)站的輪播廣告等
- css背景則多用于圖片不經(jīng)常變動的場景
-
eg如下
圖片使用場景
三、title 和 alt屬性分別有什么作用前计？
- title作為屬性胞谭，用來為元素提供額外說明信息。例如男杈，給a標(biāo)簽添加了title屬性丈屹，把鼠標(biāo)移動到該鏈接上面是，就會顯示title的內(nèi)容伶棒，以達到補充說明或者提示的效果
- alt屬性用來指定替換文字旺垒，只能用在img、area和input元素中肤无，用于網(wǎng)頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息
四先蒋、background: url(abc.png) 0 0 no-repeat;這句話是什么意思？
- background屬性總結(jié)（整理自CSS權(quán)威指南和圖解CSS）
- background-image:url || none宛渐，用來設(shè)置元素的背景圖片竞漾，<url>是指背景圖片的地址眯搭，這個地址可以使絕對地址，也可以是相對地址
- background-position:percentage || length || 關(guān)鍵詞业岁，用來設(shè)置元素背景圖片的位置
- 當(dāng)值為關(guān)鍵字時鳞仙，一是關(guān)鍵字不能超過兩個，一個對應(yīng)水平方向笔时，另一個對應(yīng)垂直方向棍好；而是當(dāng)值設(shè)置一個值時，則認(rèn)為另一個關(guān)鍵字是center
- 當(dāng)值為百分?jǐn)?shù)時糊闽，第一百分?jǐn)?shù)對齊方式是原圖像的百分?jǐn)?shù)所在的位置同元素中描述為該百分?jǐn)?shù)所在元素中的位置相對齊梳玫，比如，當(dāng)用百分?jǐn)?shù)把圖像居中時右犹，原圖像中描述為50% 50%的點同元素中描述為50% 50%的點對齊；第二姚垃，用百分?jǐn)?shù)設(shè)置位置念链，水平值總是先出現(xiàn)；第三积糯，如果只提供一個百分?jǐn)?shù)值掂墓，則這個提供的值用作水平值，垂直值假設(shè)為50%
- 當(dāng)值為長度值時看成，這些長度值解釋為從元素內(nèi)邊距區(qū)左上角的偏移君编，偏移點在原圖像的左上角，比如川慌，如果設(shè)置值為10px 15px吃嘿，則原圖像的左上角將在元素內(nèi)邊距區(qū)左上角向右10px，向下15px
- 百分?jǐn)?shù)和長度值都可以使用負(fù)值梦重，這樣可以將原圖像拉出元素的背景區(qū)
- background-repeat:repeat || repeat-x || repeat-y || no-repeat兑燥，用來設(shè)置元素背景圖片在元素的盒模型中的鋪放方式
- background-color:transpatrent || color，用來設(shè)置元素的背景顏色
- background-attachment:scroll || fixed琴拧，用來設(shè)置元素背景圖片是否固定或隨著頁面的其余部分滾動降瞳，值為scroll則圖片會隨著瀏覽器滾動條滾動，值為fixed則圖片固定不動
- background-origin:padding-box || border-box || content-box蚓胸，用來決定background-position屬性的參考原點
- padding-box挣饥，默認(rèn)值，決定background-position起始位置從padding外邊緣（即border內(nèi)邊緣）開始顯示背景圖片
- border-box沛膳，決定background-position起始位置從border外邊緣開始顯示背景圖片
- content-box扔枫，決定background-position起始位置從content外邊緣（即padding內(nèi)邊緣）開始顯示背景圖片
- background-clip:border-box || padding-box || content-box，用來定義背景圖像的裁剪區(qū)域
- border-box于置，默認(rèn)值茧吊，決定元素背景圖像從border區(qū)域向外裁剪
- padding-box贞岭，決定元素背景圖像從paddingr區(qū)域向外裁剪
- content-box，決定元素背景圖像從content區(qū)域向外裁剪
- background-size:auto || length || percentage || cover || contain搓侄，用來指定背景圖片的尺寸
- auto瞄桨，默認(rèn)值，將保持背景圖片的原始高度和寬度
- length讶踪，取具體的數(shù)值作為背景圖片的大小
- percentage芯侥，值為0~100%，其值是相對于元素的寬度進行計算
- cover乳讥，將背景圖片放大柱查，以適合鋪滿整個容器
- contain，保持背景圖片本身的寬高比例云石，將背景圖片縮放寬度或高度正好適應(yīng)所定義的容器區(qū)域
- background: url(abc.png) 0 0 no-repeat;表示某個元素設(shè)置了一個abc.png的沒有偏移的不重復(fù)的背景
五唉工、background-size有什么作用? 兼容性如何? 常用的值是?
- background-size的作用是用來指定背景圖片的尺寸
- background-size兼容性通過Can I use···查詢?nèi)缦聢D
background-size兼容性 - background-size常用的值如下
- auto，默認(rèn)值汹忠，將保持背景圖片的原始高度和寬度
- length淋硝，取具體的數(shù)值作為背景圖片的大小
- percentage，值為0~100%宽菜，其值是相對于元素的寬度進行計算（取值為length或percentage谣膳，只設(shè)置一個值時，這個值指定了背景圖片的寬度铅乡，第二個值相當(dāng)于auto）
- cover继谚，將背景圖片放大，以適合鋪滿整個容器
- contain阵幸，保持背景圖片本身的寬高比例花履，將背景圖片縮放寬度或高度正好適應(yīng)所定義的容器區(qū)域
- 比如如下代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>background-size測試</title>
<style>
.test{
width: 600px;
height: 600px;
border: 1px solid red;
background: url(img/lufei.jpg) center no-repeat;
background-size: auto;/*測試*/
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
-
值為auto時效果圖如下
background-size值為auto效果圖 -
值為length（500px 300px）時效果圖如下
background-size值為length效果圖 - 值為百分?jǐn)?shù)（80% 80%）時，此時圖片高寬是相對于元素的高寬的百分?jǐn)?shù)侨嘀，即60080%=480px,60080%=480px
background-size值為percentate效果圖 -
值為cover時效果圖如下
background-size值為cover效果圖 -
值為contain時效果圖如下
background-size值為contain效果圖
六臭挽、如何讓一個div水平居中？如何讓圖片水平居中咬腕？
- 通過
div{margin:0 auto;}可以使div水平居中
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>水平居中</title>
<style>
.test{
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
效果圖如下
div水平居中
- 通過在圖片的父元素中設(shè)置
E{text-align:center;}可以使圖片水平居中
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>圖片水平居中</title>
<style>
.test{
width: 600px;
height: 600px;
text-align: center;
border: 1px solid red;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test">
<img src="img/lufei.jpg" alt="路飛">
</div>
</body>
</html>
效果圖如下
圖片居中水平圖
七欢峰、如何設(shè)置元素透明? 兼容性？
- 通過opacity屬性可以設(shè)置元素透明度
- 語法為opacity:alphavalue || inherit涨共，alphavalue取值為0~1任意浮點數(shù)纽帖，其中1表示完全不透明，0表示完全透明举反，比如
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>opacity屬性</title>
<style>
.test{
width: 200px;
height: 200px;
background-color: red;
opacity: 0.4;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
效果圖如下
opacity效果圖
- opacity兼容性通過Can I use···查詢?nèi)缦聢D
opacity兼容性
八懊直、opacity和rgba都能設(shè)置透明，有什么區(qū)別火鼻？
- opacity是對整個元素設(shè)置不透明屬性室囊，而RGBA只對元素的背景色設(shè)置不透明
- opacity會繼承父元素的 opacity 屬性雕崩，而RGBA設(shè)置的元素的后代元素不會繼承不透明屬性
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>水平居中</title>
<style>
.opacity{
width: 200px;
height: 200px;
background-color: red;
border: 5px solid black;
opacity: 0.4;
margin: 0 auto;
margin-bottom: 50px;
text-align: center;
}
.rgba{
width: 200px;
height: 200px;
background:rgba(255, 0, 0, 0.4);;
border: 5px solid black;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div class="opacity">opacity</div>
<div class="rgba">rgba</div>
</body>
</html>
效果圖
opacity和rgba的效果圖
整理自myvin's Blogs
版權(quán)聲明：本教程版權(quán)歸鄧攀和饑人谷所有，轉(zhuǎn)載須說明來源Ｈ谧病Ｅ翁！尝偎！
