我可以只瞄準背景不透明度而沒有別的嗎

我想知道是否可以做到以下幾點。看看這個例子http://jsfiddle.net/huhu/r7kSf/，只有左側的圖標可以以不透明度爲目標嗎？讓我們假設opacity:0.5;正常情況下並懸停下來有完全不透明？我知道使用alpha係數時使用顏色更容易，但只有圖像怎麼樣？該選項可以使用兩個不同的圖標？在懸停下加載它的替代版本？我不認爲這是一個好主意，因爲很多的HTTP請求，除非在精靈左右..我可以只瞄準背景不透明度而沒有別的嗎

THX

來源

2013-01-20 user1965451

這是可能的，但需要一些棘手的CSS3黑客 - 基本，使用:before僞元素在每個項目前創建一個新的行內塊元素，然後調整這些元素的不透明度。另外，不是將背景圖像分配給<li>元素本身，而是將其分配給:before僞元素。

#mainFeatures li:before { 
    content: '\0000a0'; 
    display: inline-block; 
    opacity: 0.5; 
    width: 30px; 
} 

#mainFeatures li#[insert element ID here]:before { 
    background:url([image url]) no-repeat 0 5px; 
}

我已經修改和分叉的小提琴 - 檢查出來:) http://jsfiddle.net/teddyrised/QBGWf/1/

來源

2013-01-21 00:54:16 Terry

是，使用CSS3的rgba背景。例如，#F7F8BD有50％的不透明度變得rgba(247,248,189,0.5);注意，兼容性還不是100％，所以使用以下命令：

background: #F7F8BD; /* Browsers that don't support RGBa */ 
rgba(247,248,189,0.5); /* CSS3 */

更多信息，請參見http://css-tricks.com/rgba-browser-support/。

來源

2013-01-20 21:26:39 Mooseman

代替

opacity:0.5

使用：

background-color:rgba(0,0,0,0.5);

，其中前3個數字是紅色，綠色和藍色值，最後一個是alpha值，這使透明度你的背景

來源

2013-01-20 21:28:49 BackSlash

如果我理解了這個問題，那麼不會 - 您不能將不透明度應用於子彈圖像，但不能應用於整個li。

你最好的選擇是把圖像作爲背景的span：

<li><span class="bg"></span> Text</li>

並應用不透明性span

來源

2013-01-20 21:30:49

這就是我感興趣的:)，THX – user1965451

好 - 那麼請標記爲接受的答案。你也需要爲你以前的所有問題做這件事，以便人們繼續花時間爲你提供幫助。 –

我可以只瞄準背景不透明度而沒有別的嗎

回答

相關問題