1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS雪碧圖就是把你要使用的一些小圖標或背景圖片合并成一張圖片，然后使用CSS 的background-image、background-repeat和background-position等屬性渲染，精確定位出你想要使用的圖片部分。這樣做可以減少加載網(wǎng)頁圖片時對服務(wù)器的請求次數(shù)，提高頁面的加載速度，減少鼠標滑過的一些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標簽和CSS背景使用圖片在使用場景上有何區(qū)別
- img屬于HTML標簽，適用于圖片和內(nèi)容相關(guān)的，會發(fā)生變化的場景，例如用戶圖像，驗證碼等。
- background-img屬于CSS屬性，適用于頁面上內(nèi)容固定不變的場景，例如圖標。
以京東主頁樣式舉例：
京東主頁
3.title和 alt屬性分別有什么作用
- title屬性是提供非本質(zhì)的額外信息，比如在圖像可見時對圖像的描述(鼠標放在圖片時即會顯示)。它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有標簽。
- 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ī)定背景圖像是否固定或者隨著頁面的其余部分滾動。 | 1 |
| background-image | 規(guī)定要使用的背景圖像。 | 1 |
所以，background: url(abc.png) 0 0 no-repeat是一個background屬性的簡寫模式，它的意思使用一個abc.png的圖片作為背景圖片，圖片位置坐標為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）坐標原點位置，即外層塊元素的左上角
- background-position位置設(shè)定是指圖片與坐標原點的偏移量
- 原點是不會動的，移動的是圖片，X坐標值為正則圖片左上角向右平移，為負則圖片左上角向左平移，Y坐標值為正則圖片左上角向下平移，為負則圖片左上角向上平移
4.坐標除了用數(shù)字表示，還可以用百分比表示，
- X軸：（容器的寬度-圖片的寬度）乘以（X方向的百分數(shù)）
- Y軸：（容器的高度-圖片的高度）乘以（Y方向的百分數(shù)）
另外還可以使用關(guān)鍵字top、left、right、bottom、center來表示圖片位置。
對照下圖可以知道各個值定位的位置。
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size 屬性用來規(guī)定背景圖像的尺寸。
兼容性：
兼容性
常用的值：
| 值 | 描述 |
|---|---|
| length | 設(shè)置背景圖像的高度和寬度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個值會被設(shè)置為“atuo” |
| percentage(%) | 以父元素的百分比來設(shè)置背景圖像的寬度和高度。第一個值設(shè)置寬度，第二個值設(shè)置高度。如果只設(shè)置一個值，則第二個會被設(shè)置為“auto”。 |
| cover | 把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。 |
| contain | 把圖像擴展至最大尺寸，以使其寬度和高度完全適應(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:此值為默認值，保持背景圖片的原始高度和寬度
length
length:此值設(shè)置具體的值，可以改變背景圖片的大小
percentage
percentage:此值為百分值，可以是0％?100％之間任何值，所設(shè)置百分值將使用背景圖片大小根據(jù)所在父元素的寬度的百分比來計算
cover
cover：此值是將圖片放大，以適合鋪滿整個容器，當圖片小于容器時，又無法使用background-repeat來實現(xiàn)時，我們就可以采用cover;將背景圖片放大到適合容器的大小，但這種方法會使用背景圖片失真
contain
contain:此值是將背景圖片縮小或放大，能夠使容器完全的顯示圖片，這個主要運用在，當背景圖片大于元素容器時，而又需要將背景圖片全部顯示出來，此時我們就可以使用contain將圖片縮小到適合容器大小為止，這種方法同樣會使用圖片失真
6.如何讓一個div水平居中？如何讓圖片水平居中
div是塊級元素，只要將塊級元素的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>
元素透明
從圖例中看出，只要對div設(shè)置了opacity屬性，該div里面所有的內(nèi)容都會受到影響。
兼容性：
opacity兼容性
8.opacity和rgba都能設(shè)置透明，有什么區(qū)別？
- opacity會對元素內(nèi)所有的內(nèi)容設(shè)置透明度，而rgba只能對元素的顏色或者背景色設(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>
饑人谷前端學習
</span>
</div>
<div class="box2">
<span>
饑人谷前端學習
</span>
</div>
</body>
</html>
透明度對比
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明來源。
