如何用css顯示一個圖片中多個小圖標？

CSS顯示一個大圖片中的多個小圖標，主要是用background-position這個屬性來控制的。

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

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

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

.showImage{

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

width:?100px;

height:?100px;

}

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

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

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

#item2{

background-position:?-100px?0;

}

其他的同理。

最后貼出來一個例子，看明白了這個屬性就懂了。

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

代碼如下：

!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

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

這種圖標用css怎么做

可以在阿里圖庫中下載相應(yī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)圖標并獲取字體編碼，應(yīng)用于頁面

i class="iconfont"#x33;/i

font-class引用

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

與unicode使用方式相比，具有如下特點：

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

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

因為使用class來定義圖標，所以當(dāng)要替換圖標時，只需要修改class里面的unicode引用。

不過因為本質(zhì)上還是使用的字體，所以多色圖標還是不支持的。

使用步驟如下：

第一步：拷貝項目下面生成的fontclass代碼：

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

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

i class="iconfont icon-xxx"/i

誰幫我看看下圖引用圖標樣式CSS這段代碼是什么意思？尤其是 \e600；\e601；\e602.。。。是怎么來的

這段css代碼用到了偽類:before和IcoMoon App在線生成圖標，也就是你后邊問的\e600這些。看你這個代碼，應(yīng)該是生成了一些小圖標，左右箭頭之類的。

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

參考資料：

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

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

輸入框左側(cè)加一個縮進(padding-left)空出圖標空間，

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

2.如果是字體圖標，跟輸入框放在同一個容器里，通過絕對定位，移動到相應(yīng)位置

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

每排文字前加小圖標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可口可樂/li

/ul

/body

/html

css圖標的寫法

html代碼部分

!doctype html

html

head

meta charset="utf-8"

title圖標寫法/title

/head

body

div id="icon"

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

a href="#" class="btn"去開團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)站題目：圖標樣式css,圖標樣式怎么改
轉(zhuǎn)載來于：http://sd-ha.com/article34/dssodse.html

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

廣告

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