CSS：使用圖像精靈與CSS僞類：之前和之後：

我從來沒有嘗試過之前。我創建了一個包含兩個圖標的圖像精靈。每個圖標寬26px，高。所以精靈是26x52px。CSS：使用圖像精靈與CSS僞類：之前和之後：

我有一個在div.something或div.anything中的元素。根據所在類別的不同，我想在左側或右側添加角帽。

因此，我定位.element相對，將:before僞類應用於img，並將其絕對定位爲26px的高度和寬度，因此只有一個sprite圖標適合。我還應用「overflow：隱藏「，以便隱藏精靈上的第二個圖標。

.element { 
    position:relative; 
} 

.element:before{ 
    content: url("../images/sprite.png"); 
    position: absolute; 
    height:26px; 
    width:26px; 
    overflow:hidden; 
} 

.something .element:before { 
    top: -2px; 
    left: -2px; 
} 

anything .element:before { 
    top: -28px; 
    right: -2px; 
}

這適用於我使用精靈中第一個頂部圖標的左角。但是現在我想知道如何只顯示精靈中的第二個「任何.element」圖標。

所以實際上「掩碼」應該定位在-2px，-2px，但是精靈img裏面應該從-26px開始，所以顯示第二個圖標。

這是可能的與我現在這樣做的CSS的方式嗎？

來源

2011-08-15 matt

你能告訴你有什麼到目前爲止一個http://jsfiddle.net/演示？據我所知，'：before'不能用於'img'元素：http://jsfiddle.net/thirtydot/CWXS3/。所以，你的問題相當混亂。 – thirtydot

編輯我的問題.element不img。只是想讓它更容易理解。不知道它不適用於img – matt

嗯，這是有道理的。你給出的答案是正確的。給這個閱讀：http：//tinyurl.com/so-hints。我喜歡這個部分：''不要給我代碼這是「真實的代碼，但顯然不是真正的代碼」。 – thirtydot

請勿使用content來插入圖片，因爲您無法修改其位置。相反，將內容設置爲" "並將該精靈添加爲背景圖像。然後，您可以使用background-position屬性將精靈移動到正確的位置。否則你的例子應該工作得很好。

的工作演示：

http://jsfiddle.net/RvRxY/1/

來源

2011-08-15 12:57:10

支持：前：上的img標籤僞元素後是有限的，如果在大多數瀏覽器都存在。

最好的解決方案是將你的img放在一個div中，然後讓這個類適用於實際的div，而不是img。

你幾乎有正確的僞元素的用法。您可以試試這個：

.somediv { position:relative;} 

.somediv:before { 
    position: absolute; 
    content: ''; 
    height: 26px; 
    width: 26px; 
    top: 0; 
} 

.somediv.foo1:before { 
    background: url("../images/sprite.png") no-repeat -2px -2px; 
    left: 0; 
} 

.somediv.foo2:before { 
    background: url("../images/sprite.png") no-repeat -2px -28px; 
    right: 0; 
}

使用背景：;財產而不是內容：;屬性，以便您可以將精靈定位在：before僞元素內。

left：;對：;和頂部：;應該用於僞元素相對於其父元素（.somediv）的絕對定位。

配售1px的邊框周圍的僞元素將幫助您瞭解不同定位:)

來源

2011-08-15 13:34:26 Larry

CSS：使用圖像精靈與CSS僞類：之前和之後：

回答

相關問題