css Übergang Opazität Fade Hintergrund

Question

Ich mache einen Übergang, wo es in transparentem weiß verblasst, wenn ein Benutzer ein Bild schwebt. Mein "Problem" ist, dass ich die Farbe ändern muss, dass es verblasst, zu schwarz. Ich habe versucht, einfach Hintergrund hinzuzufügen: schwarz; zu der Klasse, die den Übergang enthält, aber es funktioniert leider nicht, es verblaßt immer noch in weiß transparent.

Der CSS-Code ich verwende ist:

.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

Answer 1

Wickeln Sie Ihr Bild in ein SPAN Element, das die 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>

Answer 2

Bitte beachten Sie, dass das Problem nicht white Farbe. Weil es transparent ist.

Wenn ein Element transparent gemacht wird, wird die gesamte Deckkraft seines untergeordneten Elements angezeigt. Alpha-Filter in IE 6 7 usw., wird auf den neuen Wert geändert.

So kann man nicht sagen, dass es weiß ist!

Sie können ein Element darüber platzieren und die Transparenz dieses Elements in 1 ändern, während Sie die Transparenz des Bildes in .2 ändern oder was auch immer Sie möchten.

Answer 3

Es ist nicht zu verblassen "black transparent" oder "weiß transparent" hat. Es zeigt nur, welche Farbe hinter dem Bild ist, das ist nicht die Hintergrundfarbe des Bildes - diese Farbe ist vollständig durch das Bild verdeckt.

Wenn Sie zu schwarz (ish) verblassen möchten, benötigen Sie einen schwarzen Container um das Bild. Etwas wie:

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

und

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

Answer 4

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 

}