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

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

創新互聯公司專注于企業成都全網營銷、網站重做改版、興安網站定制設計、自適應品牌網站建設、H5響應式網站、成都做商城網站、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為興安等各大城市提供網站開發制作服務。

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

.showImage{

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

width:?100px;

height:?100px;

}

然后用background-position屬性調整背景圖片的位置，它有兩個值分別表示背景圖片沿著x和y軸移動的距離。

擴展資料

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

選擇器就是需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成，屬性是設置的樣式屬性（style attribute），每個屬性都有一個值，屬性和值用冒號分隔。CSS 聲明總是以分號 ; 結束，聲明組以大括號 {...} 括起來。為了讓 CSS 可讀性更強，可以每行只描述一個屬性。

CSS 注釋是用來解釋代碼，并且可以隨意編輯，瀏覽器會忽略它。CSS注釋以 "/*" 開始，以 "*/" 結束。

當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。CSS 創建樣式表有三種方法：內聯樣式、內部樣式、外部樣式。

CSS樣式都有哪幾種?

大小 font-size: x-large;(特大) xx-small;(極小) 一般中文用不到，只要用數值就可以，單位：PX、PD、em等

樣式 font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

行高 line-height: normal;(正常) 單位：PX、PD、EM

粗細 font-weight: bold;(粗體) lighter;(細體) normal;(正常)

色彩background-color: #FFFFFF;

圖片background-image: url();border-style: dotted;(點線) dashed;(虛線) solid;(實線) double;(雙線) groove;(凹槽) ridge;(脊狀) inset;(邊框) outset;(邊框)

類型list-style-type: disc;(圓點) circle;(圓圈) square;(方塊) decimal;(數字) none(無)text-align:right; /*文字右對齊*/

text-align:left; /*文字左對齊*/

text-align:center; /*文字居中對齊*/

text-align:justify; /*文字分散對齊*/

vertical-align屬性

vertical-align:top; /*垂直向上對齊*/

vertical-align:bottom; /*垂直向下對齊*/

vertical-align:middle; /*垂直居中對齊*/

vertical-align:text-top; /*文字垂直向上對齊*/

vertical-align:text-bottom; /*文字垂直向下對齊*/這些都是比較常用的如果你要把樣式做的很漂亮這些還是不夠的自己去看看文檔吧慢慢學習

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

效果圖

CSS li的圖片樣式

1、css li的圖片樣式：liimg src="" class="img"/li

2、樣式： .img{width:100px; height:100px; background:#f00;}

常用重要CSS樣式的屬性

盒子模型是CSS中一個很重要的概念，頁面中的所有元素都可以看成一個盒子，并占據一定的頁面空間，一個頁面由很多盒子組成，盒子之間會互相影響。只有掌握盒模型以及其中每個屬性的用法，才能真正控制好頁面元素。

盒子模型主要定義四個區域： 內容(content)、內邊距/填充(padding)、邊框(border)和外邊距(margin) 。

盒子的內容區域存放文本和圖片等頁面元素，擁有如下屬性：

邊框基本屬性：

通過一個屬性設置四個方向邊框的寬度、樣式、顏色

屬性：border

取值：width style color;

只設置某一條邊框的寬度、樣式、顏色

語法：border-方向（top/right/bottom/left）：width style color;

只設置邊框的寬度、樣式、顏色中的一種

語法：border-屬性（width/style/color）：取值;

只設置某一條邊框的寬度、樣式、顏色中的一種

語法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;

屬性：border-radius

作用：設置倒角位置處圓的半徑，半徑越大，弧度越大。

取值：

屬性：border-image

語法：

border-image-source ：引入背景圖片

取值：

默認值：無圖片

url(圖片URL地址)

border-image-slice ：切割引入背景圖片，把邊框背景切成9份

取值：

number：默認單位px

百分比：

fill：保留邊框圖像的中間部分

border-image-width ：指定邊框圖片的寬度

border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個參數，即水平和垂直方向

取值：

Stretch：默認值，拉伸

Repeat：平鋪

Round：取整平鋪

內容區域和邊框（邊緣）之間的距離

語法：padding: 值；

單邊設置：padding-方向（top/right/bottom/left）:值；

取值：

數值px

百分比

內邊距的簡寫方式：

padding:value;

四個方向內邊距的值均為value

padding:value1 value2;

Value1為上下內邊距的值，value2為左右內邊距的值

padding:value1 value2 value3;

Value1為上內邊距的值，value2為左右內邊距的值，value3為下內邊距的值

padding:value1 value2 value3 value4;

上右下左內邊距的值分別為value1， value2， value3， value4

外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區域，通過外邊距可以為元素創建額外的“空間”。默認不能被其他元素所占據，用于拉伸兩個元素間的距離。

語法：margin: 值；

單邊設置：margin-方向（top/right/bottom/left）:值；

取值：

重新制定元素尺寸計算模式

屬性：box-sizing

取值：

屬性：resize

取值：

位于元素邊框之外的一條線

屬性：

outline：width style color;

屬性：box-shadow

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

取值：由一組值構成的值列表

屬性：background-color

取值：顏色值或transparent

注意：背景顏色是從邊框位置處開始繪制

屬性：background-image

取值：url(背景圖像URL)

屬性：background-repeat

取值：

屬性：background-attchment

取值：

scroll：默認值，滾動

fixed：固定

屬性：background-position

取值：

屬性：background-size

取值：

屬性：background-origin

取值：

屬性：background-clip

取值：

CSS3多背景通過為每個背景屬性提供多個屬性值實現。

font 簡寫屬性語法：

將所有字體屬性合寫為一行，其中font-family是復合屬性中必不可少的屬性。

可以不設置其中的某個值，如果省略值地話，就使用屬性的默認值。

②文本屬性：

（2）CSS3文本陰影屬性：

屬性：text-shadow

作用：產生陰影和模糊主體

語法：

作用：定義列表的編號樣式

屬性：list-style-type

作用：用于設置列表項的圖像屬性

語法：

圖像URL地址：圖像的相對路徑或絕對路徑

none：默認值，不指定圖像

注意：圖片圖標與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來設置列表的圖片樣式。

通過設置li的背景圖片的方式來設置列表圖片基本步驟：

設置list-style-type屬性值為none

設置li標記的背景屬性backgruond

作用：用于聲明列表標志相對于列表項內容的位置

語法：

作用：可以同時設定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。

語法：

注意：

可以不設置其中的某個值，未設置的屬性采用默認值

同時指定list-style-image和list-style-type時，list-style-image優先顯示，除非list-style-image設置為none，或圖片路徑錯誤無法顯示

當列表與列表項目同時使用樣式時，列表項目的樣式優先顯示

特點：

可以設置寬度和高度

默認情況下每個塊級元素獨占一行

作用：

塊級元素主要用于頁面布局

常用塊級元素：

div、p、h1~h6、ol、ul等

特點：

不可以設置寬度和高度，其寬度就是自身文字或圖片的寬度

默認情況下多個行內元素會在一行內顯示，遇父元素邊界時會自動換行

作用：

行內元素主要用于設置文樣式

常用行內元素：

a、span、em、b、i、strong、img、input等

作用：控制頁面元素脫離原有文檔流，實現向左或向右移動，直到該元素外邊緣碰到其包含框或另一個浮動框的邊緣停止，標準流中的其他盒子將頂到浮動盒子的位置。浮動的元素不占據實際空間。

屬性： float

取值：

浮動元素不會相互重疊；

浮動元素不會上下浮動，如果一個浮動元素在另一個浮動元素之后顯示，而且會超出容納塊，則它下降到低于先前任何浮動元素的位置。

作用：規定元素的哪一側不允許出現其他浮動元素。

取值：

作用：控制頁面元素在頁面中的位置。

屬性：position

取值：static/relative/absolute/fiexed

默認屬性值，元素按照標準文檔流進行排列，塊級元素獨占一行， 行內元素位于一行內顯示，一行顯示不下，自動換行。

特點：

相對于自身原有位置進行偏移

仍處于標準文檔流中

隨即擁有偏移屬性和z-idex屬性

偏移屬性:

left:數值px;

right:數值px;

top:數值px;

bottom:數值px;

當元素相對定位后會產生Z軸上的堆疊，不設置z-index屬性時，默認該元素出現在X軸和Y軸構成的平面上。

特點：

建立了以包含塊為基準的定位

絕對定位的元素的位置相對于最近的已定位祖先元素（設定了絕對定位、相對定位或固定定位中的任何一種），如果元素沒有已定位的祖先元素，則該元素的位置相對于瀏覽器窗口。

完全脫離了標準文檔流

隨即擁有偏移屬性和z-idex屬性

偏移屬性：

left:數值px;

right:數值px;

top:數值px;

bottom:數值px;

絕對定位未設置偏移量的特點：

無論是否存在已經定位的祖先元素，都保持在元素的初始位置

脫離了標準文檔流

設定固定定位的元素框的表現類似于將position設置為absolute，不過其包含塊是瀏覽器窗口本身。

在計算機顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對定位容器的z-index屬性即對應該方向。

作用：用于控制元素的層疊次序，使得某個元素浮于其他元素之上。

語法：

auto：遵循其父元素的定位

number：整數，可負，值大者疊加在上層

注意：使用z-index屬性時，要求該元素的position屬性值為absolute、relative或fixed。

作用：用于定義建立布局時元素生成的顯示框類型

語法：dispaly:值;

作用：用于定義建立布局時元素生成的顯示框類型

語法：visibility:值;

html5 css3樣式圖標怎么做

html5 css3樣式圖標制作方法：

1、html代碼：

div id="boxes"

div id="boxShortcode"border-radius: 40px (shortcode)/div

div id="box1"border-top-right-radius: 40px (same on both axis)/div

div id="box2"border-top-right-radius: 20px 40px (x y) /div

div id="box3"border-top-right-radius: 40px 20px (x y) /div

/div

2、css樣式代碼：

#boxes div { margin-bottom: 20px; height: 50px; padding-left: 20px }

#boxShortcode {

background: cyan;

border-radius: 40px;

}

#box1 {

background: red;

border-top-right-radius: 40px;

}

#box2? {

background: yellow;

border-top-right-radius: 20px 40px;

}

#box3 {

background: lime;

border-top-right-radius: 40px 20px;

}

3、運行結果：

當前題目：css樣式圖標大全,圖標的樣式
轉載來源：http://www.2m8n56k.cn/article6/dscsdog.html

成都網站建設公司_創新互聯，為您提供定制網站、外貿建站、網站維護、App設計、營銷型網站建設、網站策劃

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯