一烂斋、CSS Sprite(雪碧圖|精靈圖)指什么? 有什么作用
雪碧圖:將多個(gè)小的icon合成一個(gè)大圖,通過(guò)css設(shè)定不同的定位與偏移顯示大圖不同的區(qū)域;
作用:減少網(wǎng)絡(luò)請(qǐng)求稳强,也就減少了網(wǎng)絡(luò)資源的消耗敷待,也就減少了網(wǎng)頁(yè)響應(yīng)時(shí)間间涵;
二、img標(biāo)簽和CSS背景使用圖片在使用場(chǎng)景上有何區(qū)別
img標(biāo)簽:常用于圖片不固定榜揖,隨時(shí)可能出現(xiàn)更新勾哩,如qq頭像、動(dòng)態(tài)日歷举哟、首頁(yè)產(chǎn)品展示圖等等思劳;
CSS背景圖片:常用于固定的圖片或背景的,一般不會(huì)改變妨猩,如功能圖標(biāo)潜叛、指示箭頭等等;
三、title 和 alt屬性分別有什么作用
alt屬性:鏈接的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息威兜,提示信息顯示在原本加載圖片的地方销斟;
title屬性:鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示,鼠標(biāo)離開(kāi)就消失椒舵;
四蚂踊、background: url(abc.png) 0 0 no-repeat;這句話(huà)是什么意思
background:url(abc.png) 0 0 no-repeat;
:用于申明背景圖片屬性
url(abc.png):
用于聲明使用abc.png作為背景圖片;
0 0:
用于聲明圖片水片和垂直偏移都為0px逮栅;
no-repeat:
聲明圖片不進(jìn)行重復(fù)填充悴势;
下圖為實(shí)例:
五、background-size有什么作用? 兼容性如何? 常用的值是?
作用:設(shè)置背景圖像的尺寸措伐;
兼容性:
常用的值:數(shù)值特纤、百分比、cover侥加、contain捧存,實(shí)例如下圖
六、如何讓一個(gè)div水平居中担败?如何讓圖片水平居中
div水平居中:為div添加margin: 0 auto
聲明昔穴;
圖片水平居中:為該圖片的父容器添加text-align:center
聲明;
實(shí)例如下圖:
七提前、如何設(shè)置元素透明? 兼容性吗货?
元素透明:為元素添加opacity:0~1(0為完全透明,1為不透明)
聲明
兼容性如下圖:
八、opacity 和 rgba都能設(shè)置透明狈网,有什么區(qū)別
1. 語(yǔ)法區(qū)別:
opacity使用語(yǔ)法:opacity: value|inherit;/*value:0~1宙搬,0為完全透明,1為完全不透明*/
rgba使用語(yǔ)法:rgba(r,g,b,a)/*a:0~1拓哺,0為完全透明勇垛,1為完全不透明*/
2. 屬性區(qū)別:
使用opacity屬性時(shí)后代元素會(huì)繼承父元素的 opacity 屬性,使用rgba屬性值時(shí)后代元素不會(huì)繼承不透明屬性士鸥,實(shí)例如下圖:
九闲孤、代碼題
- 使用CSS Sprite 把如下6張圖標(biāo)圖片合并成一張圖片,做出如下效果, 當(dāng) hover 時(shí)背景變色:
答:代碼9-2-1 - 使用字體圖標(biāo)(如 iconfont, 查找->加入購(gòu)物車(chē)->下載 demo 烤礁、 fortawesome 或者fontello)實(shí)現(xiàn)上例效果
答:代碼9-2-2
3.使用css border實(shí)現(xiàn)如下三角形
答:代碼9-2-3
聲明:本博客版權(quán)歸蘭文聰和饑人谷所有讼积,轉(zhuǎn)載需說(shuō)明來(lái)源!