1.CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
CSS Sprite 是一種 CSS 圖像合并技術(shù)危彩，該方法是將小圖標(biāo)和背景圖像合并到一張圖片上，然后利用css的背景定位來(lái)顯示需要顯示的圖片部分泳桦。也就是說(shuō)我們生成的雪碧圖在 CSS 中恬砂，通過(guò) background-position定位圖片，減少網(wǎng)絡(luò)請(qǐng)求
例如我在 CSS Sprite 網(wǎng)站中生成了一張如下的圖片：
result.png
我要在網(wǎng)頁(yè)中實(shí)現(xiàn)圖標(biāo) hover 點(diǎn)擊效果蓬痒，我可以通過(guò)如下代碼來(lái)實(shí)現(xiàn)位置偏移：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
div {
font-size: 20px;
width: 85px;
line-height: 45px;
display: inline-block;
text-align: right;
cursor: pointer;
}
div:hover {
color: rgb(165, 98, 189);
}
.goon {
background: url(img/result.png) no-repeat 0px -217px;
}
.goon:hover {
background: url(img/result.png) no-repeat 0px -268px;
}
.begin {
background: url(img/result.png) no-repeat 0px 0px;
}
.begin:hover {
background: url(img/result.png) no-repeat 0px -53px;
}
.stop {
background: url(img/result.png) no-repeat 0px -107px;
}
.stop:hover {
background: url(img/result.png) no-repeat 0px -161px;
}
</style>
</head>
<body>
<div class="goon">前進(jìn)</div>
<div class="begin">開(kāi)始</div>
<div class="stop">停止</div>
</body>
</html>
也就是通過(guò)定位來(lái)確定圖片的出現(xiàn)位置泻骤，您不妨一試漆羔。
優(yōu)點(diǎn)：
- 減少加載網(wǎng)頁(yè)圖片時(shí)對(duì)服務(wù)器的請(qǐng)求次數(shù)
- 提高頁(yè)面的加載速度
- 減少鼠標(biāo)滑過(guò)的一些 bug
缺點(diǎn)：
- CSS 雪碧的最大問(wèn)題是內(nèi)存使用
- 影響瀏覽器的縮放功能
- 拼圖維護(hù)比較麻煩
- 使 CSS 的編寫(xiě)變得困難
- CSS 雪碧調(diào)用的圖片不能被打印
- 錯(cuò)誤得使用 Sprites 影響可訪問(wèn)性
2.img 標(biāo)簽和 CSS 背景使用圖片在使用場(chǎng)景上有何區(qū)別
- 對(duì)于固定不變的內(nèi)容，如圖標(biāo)等用 CSS 背景使用圖片狱掂。例如網(wǎng)站中萬(wàn)年不變的首頁(yè)圖標(biāo)：
背景圖片.png
- 對(duì)于可變的內(nèi)容演痒，圖片是和內(nèi)容相關(guān)聯(lián)的，會(huì)時(shí)刻改變的趋惨，就用 img 標(biāo)簽鸟顺。例如網(wǎng)站中首頁(yè)視頻推薦總會(huì)改變，而視頻的圖片也會(huì)隨之改變：
img圖片.png
3. title 和 alt 屬性分別有什么作用
- alt 屬性是在你的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息器虾，它會(huì)直接輸出在原本加載圖片的地方讯嫂。alt屬性只能用在img、area和input元素中兆沙。
我給出了如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<img src="#" alt="饑人谷">
</body>
</html>
得到的結(jié)果如下圖：
alt屬性.png
- title 屬性是在你鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示欧芽，像是標(biāo)簽批注一類(lèi)的作用。title屬性可以用在除了 base葛圃，basefont千扔，head，html库正，meta曲楚，param，script 和 title 之外的所有標(biāo)簽褥符。
我給出了如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<img src="http://cdn.joboto-public.jobtong.com/290e590c9a7c9eec22bc0b8a49723a9213dd9c9e.jpg" title="饑人谷">
</body>
</html>
得到的結(jié)果如下圖：
title屬性.png
4.background: url(abc.png) 0 0 no-repeat;這句話是什么意思
background屬性的shorthand龙誊，其中的值是background-image、bakground-position喷楣、background-repeat三個(gè)屬性的簡(jiǎn)寫(xiě)
- abc.png：所選的圖片以及其所處的位置,接受的值是一個(gè)相對(duì)URL地址或絕對(duì)URL地址
- 0 0：圖片位置的偏移,該值為左上角
- no-repeat：不重復(fù)圖片载迄，也是就只使用圖片一次
5.background-size 有什么作用? 兼容性如何? 常用的值是?
作用：background-size 屬性規(guī)定背景圖像的尺寸。
常用的值：
- cover：把背景圖像擴(kuò)展至足夠大抡蛙，以使背景圖像完全覆蓋背景區(qū)域护昧。
- contain：把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域粗截。使容器將圖片包括其內(nèi)惋耙。
- length：設(shè)置背景圖像的高度和寬度。第一個(gè)值設(shè)置寬度熊昌，第二個(gè)值設(shè)置高度绽榛。如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"婿屹。
- percentage：以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度灭美。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置高度昂利。如果只設(shè)置一個(gè)值届腐，則第二個(gè)值會(huì)被設(shè)置為 "auto"铁坎。
兼容性如圖：
background-size兼容性.png
6.如何讓一個(gè)div水平居中？如何讓圖片水平居中
- 若 div 擁有固定寬度犁苏，則直接在樣式中設(shè)置
margin： 0 auto;即可硬萍。 - 若 div 沒(méi)有寬度，則我們可以先將 div 表格化 設(shè)置
display: table;再設(shè)置margin： 0 auto;即可围详。
當(dāng)然也可以對(duì) div 設(shè)置display: inline-block;將其行內(nèi)元素化朴乖，接下來(lái)我們?cè)诟讣?jí)元素內(nèi)設(shè)置text-align: center;即可。 - 圖片居中直接設(shè)置
text-align: center;即可助赞。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
div{
border: 1px solid black;
}
.ex1{
width: 200px;
margin:0 auto;
}
.ex2{
display: table;
margin:0 auto;
}
.ex3{
text-align: center;
}ze
</style>
</head>
<body>
<div class="ex1">我是有寬度的div</div>
<div class="ex2">我是沒(méi)寬度的div</div>
<div class="ex3"><img src="饑人谷.jpg" alt=""></div>
</body>
</html>
效果如下圖：
div與圖片的水平居中.png
7.如何設(shè)置元素透明? 兼容性买羞？
- 利用 opacity 屬性來(lái)設(shè)置透明度。
- 兼容性： 所有瀏覽器都支持 opacity 屬性雹食。IE8以及更早的版本支持替代的 filter 屬性畜普。例如： filter:alpha(opacity=40)
opacity兼容性.png
8.opacity 和 rgba都能設(shè)置透明，有什么區(qū)別
rgba()和opacity都能實(shí)現(xiàn)透明效果
① rgba 語(yǔ)法：rgba(r,g,b,a)
RGBA 是在R（Red）G（Green）B（Blue）模式上增加了alpha通道婉徘，alpha通道是不透明度，如果一個(gè)元素的alpha通道數(shù)值為0%（或0）咐汞，那該元素就是完全透明的（也就是看不見(jiàn)的盖呼，但是可以透過(guò)該元素看到該元素下的元素），數(shù)值為100%（或255）時(shí)則意味著該元素完全不透明化撕。
② Opacity 語(yǔ)法：opacity: value|inherit;
value：不透明度几晤，從 0.0 （完全透明）到 1.0（完全不透明）。
區(qū)別：
- opacity 設(shè)置的元素的后代元素會(huì)繼承不透明屬性植阴。蟹瘾，而 rgba 設(shè)置的元素的后代元素不會(huì)繼承不透明屬性。
- opacity作用于元素掠手，以及元素內(nèi)的所有內(nèi)容的透明度憾朴，
- rgba 只作用于元素的顏色或其背景色。
舉例如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>text</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
div{
width: 200px;
line-height: 200px;
margin: 0 auto;
text-align: center;
font-size: 20px;
border: 2px solid yellow;
}
.rgba{
background-color: rgba(255,0,0,0.5);
}
.opacity{
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="rgba">這是RGBA的測(cè)試框</div>
<div class="opacity">這是Opacity的測(cè)試框</div>
</body>
</html>
得出如下效果：
Opacity與RGBA的區(qū)別.png
我們可以看出喷鸽， Opacity 屬性設(shè)置的透明對(duì) div 中的文本也有影響众雷，而 rgba 設(shè)置并沒(méi)有影響。
<strong>本文版權(quán)歸作者和饑人谷所有做祝，轉(zhuǎn)載請(qǐng)注明出處
