web-dev-qa-db-ja.com

css遷移不透明度フェード背景

ユーザーが画像にカーソルを合わせているときに、透明な白にフェードするtransitionを実行しています。

私の問題は、色を黒にフェードするように変更する必要があることです。私は単にbackground:black;をtransitionを含むクラスに追加しようとしましたが、それは不自然に機能せず、まだ白い透明にフェードインしています。

私が使用しているCSSコードは次のとおりです。

.hover: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;
}
<p>Hover image, the white opacity needs to be black :/</p>
<img src="//placehold.it/100x100" class="hover item-fade" />
cssbackgroundopacitytransition
26
simon

画像をbackground: black;を持つSPAN要素にラップします

.imgHolder{
  display: inline-block;
  background: #000;
}
.item-fade{
  vertical-align: top;
  transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  opacity: 1;
}
.item-fade:hover{
  opacity: 0.2;
}
<span class="imgHolder">
   <img class="item-fade" src="http://placehold.it/100x100/cf5" />
</span>
52
Roko C. Buljan

「黒透明」または「白透明」にフェードしません。画像の「背後」にある色を表示しています。これはnot画像の背景色です。その色は画像によって完全に隠されています。

黒にフェッシュしたい場合は、画像の周りに黒のコンテナが必要です。何かのようなもの：

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

そして

<div class="ctr"><img ... /></div>
4
Paul Roub

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 

}
2
kasper Taeymans

問題はwhite色ではないことに注意してください。それは透明だからです。

要素を透明にすると、その子要素のすべての不透明度。 IE 6 7などのアルファフィルターは、新しい値に変更されます。

だから、それが白いと言うことはできません！

その上に要素を配置し、その要素の透明度を1に変更しながら、画像の透明度を.2に変更できます。

0
Afzaal Ahmad Zeeshan