一、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
1、css sprite是一種圖片處理方法微服，就是將很多零散的圖片拼接成一張大的圖片，然后應(yīng)用到背景圖片中。它使用css的"background-image,background-repeat,background-position"組合進(jìn)行背景定位以蕴。background-position使用數(shù)字能夠精確的定位背景圖片的位置糙麦。
2、因?yàn)槊繌垐D片URL都會(huì)向服務(wù)器發(fā)送請(qǐng)求丛肮，拖慢網(wǎng)速赡磅，影響頁面加載速度，而css sprite是一張合成的大圖宝与，只需向服務(wù)器請(qǐng)求一次焚廊，所以提高了頁面的性能，防止頁面出現(xiàn)卡頓的問題习劫，而且每次加載都是在緩存里面咆瘟。
3、圖片是在css中定義诽里，不是image標(biāo)簽袒餐，它適用于一些內(nèi)容不變的小圖片。
參考雪碧圖
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.icon{
border:1px solid;
height:100px;
width: 100px;
background:url(http://static.360buyimg.com/devfe/toolbar/1.0.0/css
/i/toolbars.png) 0 0 no-repeat;
}
.div1{
background-position: 36px 3px;
height: 50px;
}
.div2{
background-position: 76px 32px;
}
</style>
</head>
<body>
<div class="icon div1">
<a href="#">小車</a>
</div>
<div class="icon div2"></div>
</body>
</html>
Paste_Image.png
- 雪碧圖在線合成工具
國(guó)外的雪碧圖在線合成工具css sprite
優(yōu)點(diǎn)：自動(dòng)合成谤狡，可以設(shè)置屬性灸眼。缺點(diǎn)：文件必須一個(gè)個(gè)地去選擇導(dǎo)入，不能夠批量導(dǎo)入
參考：sprite工具
- 還有一種減少網(wǎng)絡(luò)請(qǐng)求的方法是把圖片轉(zhuǎn)換成base64的字符串墓懂，它適用比較小的圖片焰宣，對(duì)網(wǎng)頁實(shí)時(shí)性有要求的
二、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別捕仔？
- img是html結(jié)構(gòu)當(dāng)中的一部分匕积；background-image是css中的一種樣式，它在css中定義逻澳。
- 對(duì)于固定不變的內(nèi)容闸天，每個(gè)人看到的都是一樣的情況，比如說圖標(biāo)斜做，這時(shí)可以使用背景圖片苞氮。對(duì)于一些可變的內(nèi)容（每個(gè)用戶看到的不一樣，或者不同時(shí)間打開網(wǎng)站時(shí)看到的不一樣）瓤逼，圖片和內(nèi)容是相關(guān)的笼吟，這時(shí)用img。
Paste_Image.png
三霸旗、title和alt屬性分別有什么作用贷帮？
- alt屬性
替換文字（alt text）是用于網(wǎng)頁中圖片無法正常顯示時(shí)給用戶提供文字說明使其了解圖像信息，它在圖片的位置顯示內(nèi)容诱告。所以替換文字是用來替代圖像而不是提供額外說明文字的撵枢。它只能用在img、area和input元素中（包括applet元素）- title屬性
title作為屬性時(shí)，用來為元素提供額外說明信息锄禽∏北兀可以用在除了base，basefont沃但，head磁滚，html，meta宵晚，param垂攘，script和title之外的所有標(biāo)簽，但是并不是必須的淤刃。當(dāng)鼠標(biāo)放置在選定元素時(shí)晒他，大部分可視化瀏覽器會(huì)顯示title的提示信息。title屬性的優(yōu)先級(jí)高于alt text逸贾。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
</head>
<body>
<img src="http://img30.360buyimg.com/da/jfs/t3172/96/21316060/77028
/1c901ad7/57a01cbfNacd3a044.jpg" title="省油的仪芒，環(huán)保的">
<img src="http://img30.360buyimg.com/da/jfs/72/96/21316060/77028
/
1c901ad7/57a01cbfNacd3a044.jpg" alt="汽車">
</body>
</html>
Paste_Image.png
四、background: url(abc.png) 0 0 no-repeat;這句話是什么意思耕陷？
1.這里是設(shè)置背景圖片，url里面是背景圖片的地址据沈，可以是絕對(duì)地址或相對(duì)地址哟沫；"0 0"說明背景圖的位置相對(duì)于元素的左上角向x軸和y軸的偏移量都是0；no-repeat是指背景圖片在水平方向和垂直方向都不重復(fù)锌介。
2.背景圖片定位
Paste_Image.png
①設(shè)置兩個(gè)值嗜诀，前面的是相對(duì)x軸方向定位(水平)，后面的相對(duì)于y軸方向定位(垂直)孔祸。如果只設(shè)置一個(gè)值隆敢，這個(gè)值是默認(rèn)是在x軸方向的定位，y軸方向默認(rèn)的是居中對(duì)齊
②原點(diǎn)是不會(huì)動(dòng)的崔慧，移動(dòng)的是圖片 X坐標(biāo)為正則圖片左上角向右平移拂蝎，為負(fù)則圖片左上角向左平移；Y坐標(biāo)為正則圖片左上角向下平移惶室，為負(fù)則左上角向上平移
③x y也可以用“top温自、bottom、left皇钞、right悼泌、center”這五個(gè)對(duì)齊方式來表示。x y等于center的時(shí)候表示居中對(duì)齊夹界，其他的表示背景圖片相對(duì)于在容器上下左右對(duì)齊馆里。
④X Y坐標(biāo)除了可以用數(shù)字表示，還可以用百分比表示。用百分比的算法是：
X：（容器的寬度-圖片的寬度）乘以（X方向的百分?jǐn)?shù)）
Y：（容器的高度-圖片的高度）乘以（Y方向的百分?jǐn)?shù)）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
div{
border: 1px solid;
width: 200px;
height: 200px;
background:url(http://f.hiphotos.baidu.com/zhidao
/pic/item/5366d0160924ab188229104f33fae6cd7b890b8e.jpg) no-repeat;
background-size: 100px 100px;
/*(200px-100px)*100%=100px
(200px-100px)*10%=10px*/
background-position: 100% 10%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Paste_Image.png
五鸠踪、background-size有什么作用? 兼容性如何? 常用的值是?
- background-size作用是設(shè)置背景圖片尺寸大小
用can i use查看兼容性
注意：ie8不支持丙者，只有ie9以上才支持
Paste_Image.png常用的值
Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.img{
display: inline-block;
border:1px solid;
width: 300px;
height: 300px;
background:url(http://d.hiphotos.baidu.com/image
/pic/item/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg) 0 0 no-repeat;
}
.test1{
background-size: 50px 50px;
}
.test2{
background-size: 50%;
}
.test3{
background-size: cover;
}
.test4{
background-size: contain;
}
</style>
</head>
<body>
<div class="img test1"></div>
<div class="img test2"></div>
<div class="img test3"></div>
<div class="img test4"></div>
</body>
</html>
Paste_Image.png
- 多重背景
設(shè)置多重背景，可以設(shè)置用逗號(hào)分隔的多個(gè)值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
div{
border: 1px solid;
width: 400px;
height: 400px;
background:url(http://d.hiphotos.baidu.com/image/pic/item
/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg),
url(http://s2.nuomi.bdimg.com/upload/deal/2014/1/V_L/623682-1391756281052.jpg);
background-repeat: no-repeat;
background-size: 50px 50px,50% 50%;
background-position: 50px,right bottom;
background-color: #ccc;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Paste_Image.png
六慢哈、如何讓一個(gè)div水平居中蔓钟？如何讓圖片水平居中？
1.div是塊塊級(jí)元素卵贱，要讓它水平居中滥沫，需要讓它外邊距左右相等，設(shè)置為
div{margin：0 auto键俱；}
2.圖片是行內(nèi)元素兰绣，要讓它水平居中，需要讓它的父容器為塊級(jí)元素且設(shè)為
text-align:center;它的作用是讓里面的行內(nèi)元素相對(duì)于自己的父容器居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
div{
border:1px solid;
width: 400px;
height: 400px;
margin:0 auto;
text-align: center;
display:block;
}
span{
display: table-cell;
border: 1px solid red;
width: 200px;
height: 200px;
vertical-align: middle;
}
img{
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<span>
<img src="http://d.hiphotos.baidu.com/image
/pic/item/38dbb6fd5266d01622b0017d9f2bd40735fa353d.jpg" alt="小狗">
</span>
</div>
</body>
</html>
Paste_Image.png
七编振、 如何設(shè)置元素透明? 兼容性缀辩？
- 用opacity屬性可以設(shè)置元素透明度。透明度在0~1之間踪央，0表示完全透明臀玄，1表示完全不透明。
透明分為背景圖透明和整體透明畅蹂。整體透明的話健无，比如說設(shè)置div的透明度，它里面包含所有東西會(huì)透明液斜，如果給背景圖設(shè)置透明度的話累贤，它只影響背景圖。
ie8是部分支持
Paste_Image.png
八少漆、opacity和 rgba都能設(shè)置透明臼膏，有什么區(qū)別？
- rgba(r,g,b,a)示损。rgb表示的是顏色;A：Alpha透明度,取值0~1之間渗磅。
- rgba()和opacity都能實(shí)現(xiàn)透明效果,但最大的不同是opacity作用于元素以及元素內(nèi)的所有內(nèi)容的透明度，而rgba()只作用于元素的顏色或其背景色检访。
opacity會(huì)繼承父元素的 opacity 屬性夺溢，而rgba()設(shè)置的元素的后代元素不會(huì)繼承透明性,只是針對(duì)自己本身有效，無法使內(nèi)部的所有元素透明烛谊。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
div{
border: 1px solid blue;
width: 200px;
height: 200px;
text-align: center;
display: inline-block;
}
.opacity{
background: red;
opacity: 0.5;
}
.rgba{
background:rgba(255,0,0,0.3);
}
</style>
</head>
<body>
<div class="opacity">這是opacity的測(cè)試</div>
<div class="rgba">這是rgba的測(cè)試</div>
</body>
</html>
Paste_Image.png
可以看出設(shè)置opacity不僅改變背景顏色的透明度风响，還改變了它里面的內(nèi)容，邊框透明度丹禀。設(shè)置rgba只改變了背景色的透明度状勤，它的內(nèi)部的內(nèi)容鞋怀，邊框都不變。
