1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS雪碧圖就是把你要使用的一些小圖標(biāo)或背景圖片合并成一張圖片，然后使用CSS 的background-image祭陷、background-repeat和background-position等屬性渲染，精確定位出你想要使用的圖片部分失仁。這樣做可以減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)，提高頁(yè)面的加載速度们何，減少鼠標(biāo)滑過的一些bug控轿。
雪碧圖在線合成網(wǎng)址工具-圖片合并茬射，
工具-圖片在線壓縮
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sprite</title>
<style>
.icon{
width: 40px;
height: 40px;
background: url(toolbars.png) 0 0 no-repeat;
}
.s1 {
background-position: 0px 0px ;
}
.s2{
background-position: 0px -40px
}
</style>
</head>
<body>
<div class="icon s1"></div>
<div class="icon s2"></div>
</body>
</html>
Sprite
2.img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
- img屬于HTML標(biāo)簽鹦蠕，適用于圖片和內(nèi)容相關(guān)的在抛，會(huì)發(fā)生變化的場(chǎng)景，例如用戶圖像刚梭，驗(yàn)證碼等肠阱。
- background-img屬于CSS屬性，適用于頁(yè)面上內(nèi)容固定不變的場(chǎng)景朴读，例如圖標(biāo)衅金。
以京東主頁(yè)樣式舉例：
京東主頁(yè)
3.title和 alt屬性分別有什么作用
- title屬性是提供非本質(zhì)的額外信息氮唯，比如在圖像可見時(shí)對(duì)圖像的描述(鼠標(biāo)放在圖片時(shí)即會(huì)顯示)。它可以用在除了base惩琉，basefont琳水，head，html诚啃，meta始赎，param，script和title之外的所有標(biāo)簽魔招。
- alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明五辽，它只能用在img杆逗、area和input元素中，是用來替代圖像而不是提供額外說明文字蠕蚜。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sprite</title>
</head>
<body>
</body>
</html>
title和alt區(qū)別
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思靶累？
在解釋這句話之前先了解一下background的全部屬性：
| 值 | 描述 | CSS |
|---|---|---|
| background-color | 規(guī)定要使用的背景顏色挣柬。 | 1 |
| background-position | 規(guī)定背景圖像的位置争舞。 | 1 |
| background-size | 規(guī)定背景圖片的尺寸竞川。 | 3 |
| background-repeat | 規(guī)定如何重復(fù)背景圖像。 | 1 |
| background-origin | 規(guī)定背景圖片的定位區(qū)域床牧。 | 3 |
| background-clip | 規(guī)定背景的繪制區(qū)域戈咳。 | 3 |
| background-attachment | 規(guī)定背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)壕吹。 | 1 |
| background-image | 規(guī)定要使用的背景圖像耳贬。 | 1 |
所以，background: url(abc.png) 0 0 no-repeat是一個(gè)background屬性的簡(jiǎn)寫模式顷蟆，它的意思使用一個(gè)abc.png的圖片作為背景圖片帐偎，圖片位置坐標(biāo)為0 0，即不發(fā)生偏移豁生， 圖片不重復(fù)漫贞。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sprite</title>
<style type="text/css">
.box {
width: 400px;
height: 250px;
border: 3px solid gold;
background: url(http://abc.png) 0 0 no-repeat;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
效果
這里還要說一下關(guān)于背景圖片定位(background-position)取值的問題：
- （0，0）坐標(biāo)原點(diǎn)位置擂红，即外層塊元素的左上角
- background-position位置設(shè)定是指圖片與坐標(biāo)原點(diǎn)的偏移量
- 原點(diǎn)是不會(huì)動(dòng)的昵骤，移動(dòng)的是圖片，X坐標(biāo)值為正則圖片左上角向右平移成榜，為負(fù)則圖片左上角向左平移赎婚，Y坐標(biāo)值為正則圖片左上角向下平移樱溉，為負(fù)則圖片左上角向上平移
4.坐標(biāo)除了用數(shù)字表示福贞，還可以用百分比表示，
- X軸：（容器的寬度-圖片的寬度）乘以（X方向的百分?jǐn)?shù)）
- Y軸：（容器的高度-圖片的高度）乘以（Y方向的百分?jǐn)?shù)）
另外還可以使用關(guān)鍵字top完丽、left逻族、right你稚、bottom、center來表示圖片位置搁痛。
對(duì)照下圖可以知道各個(gè)值定位的位置鸡典。
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size 屬性用來規(guī)定背景圖像的尺寸彻况。
兼容性：
兼容性
常用的值：
| 值 | 描述 |
|---|---|
| length | 設(shè)置背景圖像的高度和寬度纽甘。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度决瞳。如果只設(shè)置一個(gè)值皮胡，則第二個(gè)值會(huì)被設(shè)置為“atuo” |
| percentage(%) | 以父元素的百分比來設(shè)置背景圖像的寬度和高度赏迟。第一個(gè)值設(shè)置寬度锌杀，第二個(gè)值設(shè)置高度。如果只設(shè)置一個(gè)值谤职，則第二個(gè)會(huì)被設(shè)置為“auto”允蜈。 |
| cover | 把背景圖像擴(kuò)展至足夠大蒿柳，以使背景圖像完全覆蓋背景區(qū)域垒探。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 |
| contain | 把圖像擴(kuò)展至最大尺寸蛤克，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域构挤。 |
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sprite</title>
<style type="text/css">
div {
width: 400px;
height: 400px;
margin: 20px;
border: 3px solid gold;
background: url(http://img5.imgtn.bdimg.com/it/u=3987640784,323146945&fm=206&gp=0.jpg) 0 0 no-repeat;
}
.box1{
background-size: 300px 200px;
}
.box2{
background-size: 50% 50%;
}
.box3{
background-size: cover;
}
.box4{
background-size: contain;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
auto
auto:此值為默認(rèn)值筋现，保持背景圖片的原始高度和寬度
length
length:此值設(shè)置具體的值矾飞，可以改變背景圖片的大小
percentage
percentage:此值為百分值洒沦，可以是0％?100％之間任何值申眼，所設(shè)置百分值將使用背景圖片大小根據(jù)所在父元素的寬度的百分比來計(jì)算
cover
cover：此值是將圖片放大豺型，以適合鋪滿整個(gè)容器买乃，當(dāng)圖片小于容器時(shí)，又無法使用background-repeat來實(shí)現(xiàn)時(shí)肴焊，我們就可以采用cover;將背景圖片放大到適合容器的大小娶眷，但這種方法會(huì)使用背景圖片失真
contain
contain:此值是將背景圖片縮小或放大届宠，能夠使容器完全的顯示圖片乘粒，這個(gè)主要運(yùn)用在灯萍，當(dāng)背景圖片大于元素容器時(shí)，而又需要將背景圖片全部顯示出來齿风，此時(shí)我們就可以使用contain將圖片縮小到適合容器大小為止救斑，這種方法同樣會(huì)使用圖片失真
6.如何讓一個(gè)div水平居中？如何讓圖片水平居中
div是塊級(jí)元素巾陕，只要將塊級(jí)元素的margin-left和margin-right的值為atuo即可鄙煤。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
.box1 {
width: 400px;
height: 400px;
border: 3px solid gold;
margin-left: auto;
margin-right: auto;
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
div水平居中
圖片屬于內(nèi)聯(lián)元素梯刚，想讓內(nèi)聯(lián)元素水平居中在它的父元素的樣式里設(shè)置text：align=center即可薪寓。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
.box1 {
width: 400px;
height: 400px;
border: 3px solid gold;
margin-left: auto;
margin-right: auto;
text-align: center;
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
圖片水平居中
7.如何設(shè)置元素透明? 兼容性锥腻？
可以使用opacity屬性來設(shè)置元素的透明度母谎，value從 0.0 （完全透明）到 1.0（完全不透明）笛坦。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
.box1 {
width: 400px;
height: 400px;
border: 3px solid gold;
margin-left: auto;
margin-right: auto;
text-align: center;
opacity: 0.3;
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
元素透明
從圖例中看出咬扇，只要對(duì)div設(shè)置了opacity屬性懈贺，該div里面所有的內(nèi)容都會(huì)受到影響。
兼容性：
opacity兼容性
8.opacity和rgba都能設(shè)置透明，有什么區(qū)別胎源？
- opacity會(huì)對(duì)元素內(nèi)所有的內(nèi)容設(shè)置透明度涕蚤，而rgba只能對(duì)元素的顏色或者背景色設(shè)置透明度的诵。
- opacity的屬性是能繼承給后代的西疤，而rgba不能休溶。
demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 3px solid gold;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.box1{
background-color: rgb(0,255,0);
opacity: 0.3;
}
.box2{
background-color: rgba(0,255,0,0.3);
}
span{
color:red;
}
</style>
</head>
<body>
<div class="box1">
<span>
饑人谷前端學(xué)習(xí)
</span>
</div>
<div class="box2">
<span>
饑人谷前端學(xué)習(xí)
</span>
</div>
</body>
</html>
透明度對(duì)比
本文版權(quán)歸本人和饑人谷所有芭碍，轉(zhuǎn)載請(qǐng)注明來源窖壕。
