從sprite中獲取圖像並添加到href中

我已將所有圖標添加到sprite中。現在，我需要通過鏈接顯示該精靈的一個圖標。當我添加精靈並在鏈接上設置它的背景位置時，所有鏈接的背景都是精靈精靈。 enter image description here 從sprite中獲取圖像並添加到href中

a{ 
    background-image:url('sprite.png'); 
} 
.sprite_link_icon{ 
    padding-left: 20px; 
    background-position: -36px -10px 
} 
<a class="sprite_link_icon" href="">test link test</a>

如何設置精靈的寬度和高度，使之只顯示一個圖標？

是在「a」標籤中添加兩個div的唯一方法嗎？首先，帶有精靈圖標和寬度和高度集的div，以及其他文本？

<a href=""> 
    <div class="sprite_link_icon" style="width: 10px; height: 10px;"></div> 
    <div>test link</div> 
</a>

來源

2013-05-06 lolalola

可能重複http://stackoverflow.com/questions/7777159/clip-crop-background-image-with-css） – Antony 2013-05-06 18:49:12

並帶有正確的答案！ – Rudie 2013-05-06 18:54:38

你可以使用:before或:after實際背景移動到另一個（僞）元素，這正是一個圖標的大小合適。

事情是這樣的：

.icon { 
    /* nothing special here, just a dynamic element, 
    maybe with a fixed height? */ 
} 
.icon:before { 
    content: ''; 
    display: inline-block; 
    height: 16px; 
    width: 16px; 
    background: url(...) etc; 
    margin-right: .25em; /* might not be necessary due to inline-block */ 
}

小提琴：http://jsfiddle.net/rudiedirkx/RG3Kd/（使用錯誤的大小，因爲我沒有一個好的精靈方便）。

來源

2013-05-06 18:46:00 Rudie

就我而言，這是正確的答案。沒有額外的HTML，可以回到IE7，並且如果精靈大小需要改變，可以輕鬆重新配置。 – 2013-05-06 19:17:29

你不能這樣做，當你在做精靈時，你應該記住元素的寬度和高度會有多大。

當您在「a」標籤中添加跨度並向其添加背景時，您可以避免出現問題，並且具有特定的寬度和高度。或者你可以重新安排你的精靈。

來源

2013-05-06 18:49:12 drip

使用此代碼風格：

a 
    { 
     background-color:#00cc00; 
     padding-left:20px; 
     } 

    a span 
    { 
     background-color:#fff;    
     }

那麼這個網站：

<a href="#"><span>test link</span></a>

[剪輯/作物與CSS背景圖像（的

來源

2013-05-06 19:03:30 Ehsan

從sprite中獲取圖像並添加到href中

回答

相關問題