CSS css过渡不透明度淡出背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21145621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css transition opacity fade background
提问by simon
I am doing a transitionwhere it fades into transparent white, when a user is hovering an image.
transition当用户悬停图像时，我正在做一个淡入透明白色的地方。
My problem is that I need to change the color, that it fades to, to black. I have tried just simply adding background:black;to the class that contains the transition, but it does not work unfurtunately, it's still fading into white transparent.
我的问题是我需要将颜色更改为黑色。我曾尝试只是简单地添加background:black;到包含 的类transition，但不幸的是它不起作用，它仍然淡入白色透明。
The css code I am using is:
我使用的 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" />回答by Roko C. Buljan
Wrap your image into a SPANelement that has the background: black;
将您的图像包装到SPAN具有background: black;
.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>回答by Paul Roub
It's not fading to "black transparent" or "white transparent". It's just showing whatever color is "behind" the image, which is notthe image's background color - that color is completely hidden by the image.
它不会褪色到“黑色透明”或“白色透明”。它只是显示图像“后面”的任何颜色，这不是图像的背景颜色 - 该颜色完全被图像隐藏。
If you want to fade to black(ish), you'll need a black container around the image. Something like:
如果要淡化为黑色（ish），则需要在图像周围放置一个黑色容器。就像是：
.ctr {
margin: 0;
padding: 0;
background-color: black;
display: inline-block;
}
and
和
<div class="ctr"><img ... /></div>
回答by kasper Taeymans
.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
}
回答by Afzaal Ahmad Zeeshan
Please note that the problem is not whitecolor. It is because it is being transparent.
请注意，问题不是white颜色。因为它是透明的。
When an element is made transparent, all of its child element's opacity; alpha filter in IE 6 7 etc, is changed to the new value.
当一个元素透明时，它的所有子元素的不透明度；IE 6 7 等中的 alpha 过滤器更改为新值。
So you cannot say that it is white!
所以你不能说它是白色的！
You can place an element above it, and change that element's transparency to 1while changing the image's transparency to .2or what so ever you want to.
您可以在其上方放置一个元素，然后将该元素的透明度1更改为，同时将图像的透明度更改为.2或您想要的任何内容。
