如何用css顯示一個(gè)圖片中多個(gè)小圖標(biāo)？

CSS顯示一個(gè)大圖片中的多個(gè)小圖標(biāo)，主要是用background-position這個(gè)屬性來(lái)控制的。

創(chuàng)新互聯(lián)為客戶提供專業(yè)的成都網(wǎng)站建設(shè)、成都做網(wǎng)站、程序、域名、空間一條龍服務(wù)，提供基于WEB的系統(tǒng)開(kāi)發(fā). 服務(wù)項(xiàng)目涵蓋了網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站程序開(kāi)發(fā)、WEB系統(tǒng)開(kāi)發(fā)、微信二次開(kāi)發(fā)、移動(dòng)網(wǎng)站建設(shè)等網(wǎng)站方面業(yè)務(wù)。

先看下面這張300*300的大圖片，每個(gè)小圖標(biāo)是100*100的。(這張圖片名字叫9pic2.jpg)

首先先將你要放置背景小圖標(biāo)的元素的大小設(shè)置成圖片里圖標(biāo)的實(shí)際大小，用width和height設(shè)置，然后用background-image把背景圖片放進(jìn)去，比如：

.showImage{

background-image:?url(9pic2.jpg);

width:?100px;

height:?100px;

}

這么設(shè)置完畢后，大圖片左上角那個(gè)小圖標(biāo)（這里假設(shè)是100*100的小圖標(biāo)）就出來(lái)了。

然后用background-position屬性調(diào)整背景圖片的位置，它有兩個(gè)值分別表示背景圖片沿著x和y軸移動(dòng)的距離。你想象背景圖片一開(kāi)始是和當(dāng)前元素左上角重合，但背景圖片是可以移動(dòng)的，由于瀏覽器坐標(biāo)系x軸正向右，y軸正向下。所以，背景圖片一般需要向左移動(dòng)，和向上移動(dòng)，這樣移動(dòng)的值往往都是負(fù)的。

比如上面第2張小圖標(biāo)，需要把大圖片沿著x方向向左移動(dòng)100px，y方向不變，設(shè)置background-position屬性如下：

#item2{

background-position:?-100px?0;

}

其他的同理。

最后貼出來(lái)一個(gè)例子，看明白了這個(gè)屬性就懂了。

用到的另一張圖片名字叫9pic1.jpg,先貼出來(lái)：

代碼如下：

!doctype?html

html?lang="en"

head

meta?charset="UTF-8"

title背景background-position切圖/title

style

.showImage{

background-image:?url(9pic2.jpg);

width:?100px;

height:?100px;

}

.showImage:hover{

background-image:?url(9pic1.jpg);

}

ul{

list-style:?none;

}

ul?li{

float:?left;

margin:?20px;

}

#item1{

background-position:?0?0;

}

#item2{

background-position:?-100px?0;

}

#item3{

background-position:?-200px?0;

}

#item4{

background-position:?0?-100px;

}

#item5{

background-position:?-100px?-100px;

}

#item6{

background-position:?-200px?-100px;

}

#item7{

background-position:?0?-200px;

}

#item8{

background-position:?-100px?-200px;

}

#item9{

background-position:?-200px?-200px;

}

/style

/head

body

div?class="container"

ul

li?id="item1"?class="showImage"/li

li?id="item2"?class="showImage"/li

li?id="item3"?class="showImage"/li

li?id="item4"?class="showImage"/li

li?id="item5"?class="showImage"/li

li?id="item6"?class="showImage"/li

li?id="item7"?class="showImage"/li

li?id="item8"?class="showImage"/li

li?id="item9"?class="showImage"/li

/ul

/div

/body

/html

這個(gè)例子把那個(gè)圖片打散，橫排在頁(yè)面上，還用:hover偽類實(shí)現(xiàn)了你鼠標(biāo)移動(dòng)到上面就從黑白變彩色。

這種圖標(biāo)用css怎么做

可以在阿里圖庫(kù)中下載相應(yīng)的圖標(biāo)，下到本地后

第一步：拷貝項(xiàng)目下面生成的font-face

@font-face {font-family: 'iconfont';

src: url('iconfont.eot');

src: url('iconfont.eot?#iefix') format('embedded-opentype'),

url('iconfont.woff') format('woff'),

url('iconfont.ttf') format('truetype'),

url('iconfont.svg#iconfont') format('svg');

}

第二步：定義使用iconfont的樣式

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;}

第三步：挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁(yè)面

i class="iconfont"#x33;/i

font-class引用

font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語(yǔ)意不明確的問(wèn)題。

與unicode使用方式相比，具有如下特點(diǎn)：

兼容性良好，支持ie8+，及所有現(xiàn)代瀏覽器。

相比于unicode語(yǔ)意明確，書寫更直觀?？梢院苋菀追直孢@個(gè)icon是什么。

因?yàn)槭褂胏lass來(lái)定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時(shí)，只需要修改class里面的unicode引用。

不過(guò)因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

使用步驟如下：

第一步：拷貝項(xiàng)目下面生成的fontclass代碼：

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑選相應(yīng)圖標(biāo)并獲取類名，應(yīng)用于頁(yè)面：

i class="iconfont icon-xxx"/i

誰(shuí)幫我看看下圖引用圖標(biāo)樣式CSS這段代碼是什么意思？尤其是 \e600；\e601；\e602.。。。是怎么來(lái)的

這段css代碼用到了偽類:before和IcoMoon App在線生成圖標(biāo)，也就是你后邊問(wèn)的\e600這些?？茨氵@個(gè)代碼，應(yīng)該是生成了一些小圖標(biāo)，左右箭頭之類的。

可以參考下邊這個(gè)文章，里邊有詳細(xì)的講IcoMoon App 看到后邊你就全明白了。

參考資料：

框左邊加一個(gè)小圖標(biāo)，css樣式應(yīng)該怎么寫

輸入框吧？方法很多給兩種供選擇。

輸入框左側(cè)加一個(gè)縮進(jìn)(padding-left)空出圖標(biāo)空間，

1.如果圖標(biāo)是圖片文件，作為輸入框的背景圖，不重復(fù)(no-repeat)，通過(guò)background-position調(diào)整圖標(biāo)位置

2.如果是字體圖標(biāo)，跟輸入框放在同一個(gè)容器里，通過(guò)絕對(duì)定位，移動(dòng)到相應(yīng)位置

當(dāng)然，圖片文件的圖標(biāo)也可以用方法2，這樣就能用雪碧圖了

每排文字前加小圖標(biāo)CSS樣式怎么寫

如果是列表，可以這樣：

html

head

style type="text/css"

ul

{

list-style: square inside url('/image/example.gif')

}

/style

/head

body

ul

li咖啡/li

li茶/li

li可口可樂(lè)/li

/ul

/body

/html

css圖標(biāo)的寫法

html代碼部分

!doctype html

html

head

meta charset="utf-8"

title圖標(biāo)寫法/title

/head

body

div id="icon"

span class="price"#65509;89.0/span

a href="#" class="btn"去開(kāi)團(tuán)nbsp;gt;/a

/div

/body

/html

下面是css代碼部分,處理了瀏覽器的兼容

style

#icon{display:inline-block;}

.price{display:inline-block; background:#E60012; font-size:40px; color:#fff; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topleft:43px; -moz-border-radius-bottomleft: 43px; -webkit-border-top-left-radius:43px; -webkit-border-bottom-left-radius:43px; border-top-left-radius:43px; border-bottom-left-radius:43px;}

.btn{display:inline-block; background:#000; font-size:40px; color:#fff; text-decoration:none; float:left; padding:0px 60px; height:86px; line-height:86px; -moz-border-radius-topright:43px; -moz-border-radius-bottomright: 43px; -webkit-border-top-right-radius:43px; -webkit-border-bottom-right-radius:43px; border-top-right-radius:43px; border-bottom-right-radius:43px;}

/style

效果圖

網(wǎng)站題目：圖標(biāo)樣式css,圖標(biāo)樣式怎么改
轉(zhuǎn)載來(lái)于：http://www.rwnh.cn/article34/dssodse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、網(wǎng)站制作、品牌網(wǎng)站建設(shè)、定制開(kāi)發(fā)、搜索引擎優(yōu)化、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)