css轉換不透明褪色背景

我正在做一個轉換，當用戶懸停圖像時，它會變成透明白色。我的「問題」是我需要將顏色變爲黑色。我只是簡單地添加背景：黑色;到包含過渡的類，但它不工作，不幸的是，它仍然變成白色透明。css轉換不透明褪色背景

我使用的CSS代碼：

.item-food:hover{ 
    opacity:0.2; 
} 

.item-fade{ 
    background:black; 
    opacity: 0.8; 
    transition: opacity .25s ease-in-out; 
    -moz-transition: opacity .25s ease-in-out; 
    -webkit-transition: opacity .25s ease-in-out; 
}

See small js fiddle here

來源

2014-01-15 simon

包裝你的圖像轉換成具有background: black;

.imgHolder{ 
 
    display: inline-block; 
 
    background: #000; 
 
} 
 
.item-fade{ 
 
    vertical-align: top; 
 
    opacity: 1; 
 
    transition: opacity 0.3s; 
 
    -webkit-transition: opacity 0.3s; 
 
} 
 
.item-fade:hover{ 
 
    opacity: 0.2; 
 
}

<span class="imgHolder"> 
 
    <img class="item-fade" src="http://placehold.it/100x100/cf5" /> 
 
</span>

來源

2014-01-15 18:43:28

完美地工作！由於你在哪裏發佈工作結果的第一人，當系統允許我時，我會將你的標記標記爲正確 - 非常感謝:) – simon

請注意，這個問題是不是white顏色。這是因爲它是透明的。

當一個元素變得透明時，它的所有子元素的不透明度; IE 6 7等中的alpha過濾器被更改爲新值。

所以你不能說它是白色的！

您可以在其上放置一個元素，並將該元素的透明度更改爲1，同時將圖像的透明度更改爲.2或您想要的值。

來源

2014-01-15 18:43:20

你的推理是錯誤的。這是因爲圖像正在被褪色，因爲它覆蓋了背景色 –

它不褪色一個SPAN元素爲「黑色透明」或「白色透明」。它只是顯示圖像背後的任何顏色，即而不是圖像的背景顏色 - 該圖像完全隱藏顏色。

如果您想淡入黑色（ish），您需要在圖像周圍放置一個黑色容器。喜歡的東西：

.ctr { 
    margin: 0; 
    padding: 0; 
    background-color: black; 
    display: inline-block; 
}

和

<div class="ctr"><img ... /></div>

來源

2014-01-15 18:43:41

http://jsfiddle.net/6xJQq/13/

.container{ 
    display:inline-block; 
    padding:5px;/*included padding to see background when img apacity is 100%*/ 
    background-color:black; 
    opacity: 1; 
} 

.container:hover{ 
    background-color:red; 
} 
img{ 
    opacity: 1; 
} 
img:hover{ 
    opacity: 0.7; 
} 

.transition{ 
    transition: all .25s ease-in-out; 
    -moz-transition: all .25s ease-in-out; 
    -webkit-transition: all .25s 

}

來源

2014-01-15 18:52:52

css轉換不透明褪色背景

回答

相關問題