一、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
1、css sprite是一種圖片處理方法，就是將很多零散的圖片拼接成一張大的圖片，然后應用到背景圖片中。它使用css的"background-image,background-repeat,background-position"組合進行背景定位。background-position使用數字能夠精確的定位背景圖片的位置。
2、因為每張圖片URL都會向服務器發送請求，拖慢網速，影響頁面加載速度，而css sprite是一張合成的大圖，只需向服務器請求一次，所以提高了頁面的性能，防止頁面出現卡頓的問題，而且每次加載都是在緩存里面。
3、圖片是在css中定義，不是image標簽，它適用于一些內容不變的小圖片。
參考雪碧圖
例如：
<!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
- 雪碧圖在線合成工具
國外的雪碧圖在線合成工具css sprite
優點：自動合成，可以設置屬性。缺點：文件必須一個個地去選擇導入，不能夠批量導入
參考：sprite工具
- 還有一種減少網絡請求的方法是把圖片轉換成base64的字符串，它適用比較小的圖片，對網頁實時性有要求的
二、img標簽和CSS背景使用圖片在使用場景上有何區別？
- img是html結構當中的一部分；background-image是css中的一種樣式，它在css中定義。
- 對于固定不變的內容，每個人看到的都是一樣的情況，比如說圖標，這時可以使用背景圖片。對于一些可變的內容（每個用戶看到的不一樣，或者不同時間打開網站時看到的不一樣），圖片和內容是相關的，這時用img。
Paste_Image.png
三、title和alt屬性分別有什么作用？
- alt屬性
替換文字（alt text）是用于網頁中圖片無法正常顯示時給用戶提供文字說明使其了解圖像信息，它在圖片的位置顯示內容。所以替換文字是用來替代圖像而不是提供額外說明文字的。它只能用在img、area和input元素中（包括applet元素）- title屬性
title作為屬性時，用來為元素提供額外說明信息。可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽，但是并不是必須的。當鼠標放置在選定元素時，大部分可視化瀏覽器會顯示title的提示信息。title屬性的優先級高于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="省油的，環保的">
<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.這里是設置背景圖片，url里面是背景圖片的地址，可以是絕對地址或相對地址；"0 0"說明背景圖的位置相對于元素的左上角向x軸和y軸的偏移量都是0；no-repeat是指背景圖片在水平方向和垂直方向都不重復。
2.背景圖片定位
Paste_Image.png
①設置兩個值，前面的是相對x軸方向定位(水平)，后面的相對于y軸方向定位(垂直)。如果只設置一個值，這個值是默認是在x軸方向的定位，y軸方向默認的是居中對齊
②原點是不會動的，移動的是圖片 X坐標為正則圖片左上角向右平移，為負則圖片左上角向左平移；Y坐標為正則圖片左上角向下平移，為負則左上角向上平移
③x y也可以用“top、bottom、left、right、center”這五個對齊方式來表示。x y等于center的時候表示居中對齊，其他的表示背景圖片相對于在容器上下左右對齊。
④X Y坐標除了可以用數字表示，還可以用百分比表示。用百分比的算法是：
X：（容器的寬度-圖片的寬度）乘以（X方向的百分數）
Y：（容器的高度-圖片的高度）乘以（Y方向的百分數）
<!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作用是設置背景圖片尺寸大小
用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
- 多重背景
設置多重背景，可以設置用逗號分隔的多個值
<!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
六、如何讓一個div水平居中？如何讓圖片水平居中？
1.div是塊塊級元素，要讓它水平居中，需要讓它外邊距左右相等，設置為
div{margin：0 auto；}
2.圖片是行內元素，要讓它水平居中，需要讓它的父容器為塊級元素且設為
text-align:center;它的作用是讓里面的行內元素相對于自己的父容器居中
<!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
七、 如何設置元素透明? 兼容性？
- 用opacity屬性可以設置元素透明度。透明度在0~1之間，0表示完全透明，1表示完全不透明。
透明分為背景圖透明和整體透明。整體透明的話，比如說設置div的透明度，它里面包含所有東西會透明，如果給背景圖設置透明度的話，它只影響背景圖。
ie8是部分支持
Paste_Image.png
八、opacity和 rgba都能設置透明，有什么區別？
- rgba(r,g,b,a)。rgb表示的是顏色;A：Alpha透明度,取值0~1之間。
- rgba()和opacity都能實現透明效果,但最大的不同是opacity作用于元素以及元素內的所有內容的透明度，而rgba()只作用于元素的顏色或其背景色。
opacity會繼承父元素的 opacity 屬性，而rgba()設置的元素的后代元素不會繼承透明性,只是針對自己本身有效，無法使內部的所有元素透明。
<!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的測試</div>
<div class="rgba">這是rgba的測試</div>
</body>
</html>
Paste_Image.png
可以看出設置opacity不僅改變背景顏色的透明度，還改變了它里面的內容，邊框透明度。設置rgba只改變了背景色的透明度，它的內部的內容，邊框都不變。
