1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS雪碧圖是指將網(wǎng)站上的圖標(biāo)合成在一張圖片上，用background-position的方式加以應(yīng)用，以減少頁面請求的數(shù)量衅胀，使頁面加載更快速。
2.img標(biāo)簽和CSS背景使用圖片在使用場景上有何區(qū)別泼舱？
CSS背景圖常用于頁面上不變的內(nèi)容援雇，而當(dāng)頁面上的圖片內(nèi)容需要經(jīng)常變動或者有鏈接功能時使用img標(biāo)簽。
3.title和 alt屬性分別有什么作用时迫？
alt是當(dāng)內(nèi)容無法加載時顯示的替代文本颅停，title是當(dāng)鼠標(biāo)移動到超鏈接上時的說明文本。
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思掠拳？
設(shè)置背景圖片地址為abc.png癞揉，x軸方向偏移0，y軸方向偏移為0溺欧，不重復(fù)喊熟。
5.background-size有什么作用? 兼容性如何? 常用的值是?
-
background-size具有調(diào)整背景圖片大小的功能。 -
background-size的兼容性如下圖：
常用值：（舉例中圖片原本大小為595px449px）*
-
background-size:300px 100px姐刁，使背景圖片長寬分別為300px和100px芥牌。
<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:300px 100px;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
- ```background-size:30% 50%```，使圖片長寬分別為父元素長寬的30%和50%聂使。
- ```
<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:30% 50%;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
-
background-size:contain壁拉，縮放圖片以完全裝入父元素，父元素可能出現(xiàn)留白柏靶。
<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:contain;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
- ```background-size:cover```弃理，縮放背景圖片以完全覆蓋父元素，圖片可能部分看不到屎蜓。
- ```
<!DOCTYPE html>
<html>
<head>
<title>background-size</title>
<style type="text/css">
.div1 {
background:url(image/cat.jpg) 0 0 no-repeat;
width:650px;
height:300px;
border:1px solid #000;
background-color:#ccc;
background-size:cover;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
6.如何讓一個div水平居中痘昌？如何讓圖片水平居中
i.
- 若想使
div水平居中，須給div一定寬度，margin左右設(shè)為auto:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div水平居中</title>
<style type="text/css">
.div1 {
width:600px;
height:400px;
border:1px solid #000;
background-color:#ccc;
margin:0 auto ;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
- 給該```div```配置屬性```display:inline-block;```并為其父元素添加樣式```text-align:center```辆苔，亦可使```div```水平居中:
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div水平居中</title>
<style type="text/css">
body {
text-align:center;
}
.div1 {
width:600px;
height:400px;
border:1px solid #000;
background-color:#f00;
display:inline-block;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
ii.
- 對于img元素笔诵，因為其屬于行內(nèi)元素，故可在其父元素上添加text-align:center樣式即可實現(xiàn)水平居中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)8</title>
<style>
body {
text-align:center;
}
</style>
</head>
<body>
<img src="image/cat.jpg">
</body>
</html>
- 也可以將```img```元素添加```display:block; margin:0 auto; ```樣式姑子，同樣可以達到效果:
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)8</title>
<style>
img {
display:block;
margin:0 auto;
}
</style>
</head>
<body>
<img src="image/cat2.jpg">
</body>
</html>
- 如果將圖片設(shè)置為背景圖片乎婿，也可通過
background-position:center的方式將圖片設(shè)置成水品居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)8</title>
<style>
.div1 {
background:url(image/cat2.jpg) 0 0 no-repeat;
background-position:center top; /top意指圖片在垂直方向上向上對齊街佑，亦可取center或bottom/
width:100%;
height:700px;
border:1px solid #000;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
</html>
###7.如何設(shè)置元素透明谢翎？兼容性？
可用```opacity```屬性設(shè)定元素的透明度沐旨，```opacity```取值為1（完全不透明）到0（完全透明）之間森逮。
兼容性見下圖：
###8.```opacity```和 ```rgba```都能設(shè)置透明，有什么區(qū)別
當(dāng)```opacity```屬性的值應(yīng)用于某個元素上時磁携，是把這個元素（包括它的內(nèi)容）當(dāng)成一個整體看待褒侧，其子元素都會產(chǎn)生透明效果。
而```rgba```只是顏色的一個參數(shù)谊迄，并不會對其子元素產(chǎn)生影響闷供。
舉例：
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任務(wù)8</title>
<style>
.div1 {
background-color:rgb(255,0,0);
opacity:0.5;
height:100px;
width:200px;
}
.div2 {
background-color:rgba(255,0,0,0.5);
height:100px;
width:200px;
}
</style>
</head>
<body>
<div class="div1">
<h1>opacity</h1>
</div>
<div class="div2">
<h1>rgba</h1>
</div>
</body>
</html>
效果：
本教程版權(quán)歸本人及饑人谷所有，轉(zhuǎn)載請注明來源统诺。
