css 过渡不透明度淡入淡出背景

Posted 2023-03-06

【中文标题】css 过渡不透明度淡入淡出背景

【英文标题】：css transition opacity fade background

【发布时间】：2014-02-04 09:44:35

【问题描述】：

我正在做一个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" />

【参考方案1】：

请注意问题不是white颜色。这是因为它是透明的。

当一个元素变为透明时，其所有子元素的不透明度； IE 6 7 等中的 alpha 过滤器更改为新值。

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

您可以在其上方放置一个元素，并将该元素的透明度更改为1，同时将图像的透明度更改为.2 或您想要的任何值。

【讨论】：

你的推理是错误的。这是因为图像当前正在褪色，因为它覆盖了背景颜色

【参考方案2】：

用黑色背景的span 元素包裹您的图像。

.img-wrapper 
  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="img-wrapper">
   <img class="item-fade" src="https://via.placeholder.com/100x100/cf5" />
</span>

【参考方案3】：

它不会褪色为“黑色透明”或“白色透明”。它只是显示图像“背后”的任何颜色，不是图像的背景颜色 - 该颜色完全被图像隐藏。

如果您想淡化为黑色（ish），则需要在图像周围放置一个黑色容器。比如：

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

和

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

【参考方案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  ease-in-out;