在錨標籤上使用CSS Sprite

我正在尋找一些關於最佳結構的CSS大師建議。我正在執行精靈而不是水平「列表」上的圖標。當前的HTML是這樣的：在錨標籤上使用CSS Sprite

<a href="link"><img src="icon" /></a><a href="link_b"><img src="icon"/></a>

等

所以我更換一個精靈。我正在使用

<a href="link" class="sprite_img_a"></a><a href="link_b" class="sprite_img_b"></a>

但要做到這一點我給標籤行內塊和寬度。我從來不喜歡內聯塊，它看起來笨重。

有更好的選擇嗎？（嵌套跨度，div封裝？）

來源

2011-05-18 Karishma

爲什麼你現在需要'inline-block'？它是給你的鏈接一個高度？ – 2011-05-18 10:31:47

是的。有些東西需要強制高度。 – Karishma 2011-05-18 10:38:19

@karishma：inline-block是一個不錯的選擇，但如果不希望如此，您可以使用下面的CSS。

a.sprite_img_a{ 
    background:url('image.jpg') no-repeat 0 0 ; 
    float:left; 
    display:block; 
    width:30px; 
    height:30px; 
} 
a.sprite_img_a:hover{ 
    background-position:-20px 10px ; 
}

這是很好用的圖標圖像背景，因爲1）它節省空間的標記2 &）它的良好的搜索引擎優化的目的，由谷歌避免不必要的圖像緩存。

來源

2011-05-18 10:28:16 sandeep

狡猾。沒有考慮到這一點。 – Karishma 2011-05-18 10:38:57

「避免Google不需要的圖像緩存」 - 呃？ – 2011-05-18 10:40:48

@paul;首先感謝編輯我的答案，因爲我面臨着與stackoverflow問題。第二谷歌chache只有那些在img標籤不在背景和第三的圖片假設我有一個圓角的圖像。所以，將圖像放在img或背景中是有好處的。 – sandeep 2011-05-18 11:17:13

我經常這樣做：

<a class="button sprite" href="#"><span class="sprite">Blah</span></a>

這裏是CSS：

.sprite{ 
    background: url("../images/sprite.png") no-repeat scroll left top transparent; 
} 
.button{ 
    background-position: 0 -80px; 
    color: white; 
    display: block; 
    float: left; 
    font-size: 0.75em; 
    height: 28px; 
    line-height: 28px; 
    margin-top: 7px; 
    overflow: hidden; 
    padding-left: 5px; 
    text-decoration: none; 
    cursor: pointer; 
} 
.button span{ 
    background-position: right -80px; 
    height: 28px; 
    color: white; 
    display: block; 
    float: left; 
    padding: 0 10px 0 5px; 
    position: relative; 
    text-transform: uppercase; 
    text-decoration: none; 
}

來源

2011-05-18 10:28:37

什麼顯示你給跨度？ – Karishma 2011-05-18 10:41:03

我剛剛更新了我的答案:) – 2011-05-18 11:25:13

好的。感謝您的回答。我會嘗試其他建議，看看最合適的。 – Karishma 2011-05-18 12:04:41

我喜歡你的技術@sandeep和@旗木，卡卡西。一些可能的改進（儘管也許超出了問題的範圍）。嘗試構建您的名單和HTML這樣：

<style> 
/* let your UL and LI handle the link positioning */ 
ul.sprites {width:somevalue;} /* <--clearfix this someplace cause of the floats inside*/ 
ul.sprites li {float:left;} /* <- these should collapse to the 30x30 width of the children */ 
ul.sprites li a { 
    display:block; 
    /*sprite dimensions*/ 
    width:30px; 
    height:30px; 
    background: url('..images/spritesSheet.png') 0 0 no-repeat; 
    /*hide link text*/ 
    text-indent: -9999em 
    overflow: hidden; 
    text-align: left; 
} 

/*adjust the background of the single sprite image file*/ 
ul.sprites a.spriteName1 {background-position:x y;} 
ul.sprites a.spriteName1:hover {background-position:x y;} 
ul.sprites a.spriteName2 {background-position:x y;} 
ul.sprites a.spriteName2:hover {background-position:x y;} 
/* etc...*/ 

</style> 
<html> 
<ul class="sprites"> 
    <li><a class="spriteName1" href="#">link1</a></li> 
    <li><a class="spriteName2" href="#">link2</a></li> 
</ul> 
</html>

這種方式，級聯爲你工作，並在此列表中的所有鏈接可以得到精靈造型沒有多餘的類名。你讓你的父元素處理定位。至少，我認爲這是正確的。語法和僞代碼的歉意，因爲我寫它有點快而骯髒。

來源

2011-06-21 18:24:27 adc

在錨標籤上使用CSS Sprite

回答

相關問題