css 过渡不透明度淡入淡出背景 [英] css transition opacity fade background

问题描述

我正在做一个 transition，当用户悬停图像时，它会变成透明的白色.

I am doing a transition where it fades into transparent white, when a user is hovering an image.

我的问题是我需要将颜色更改为黑色.我试过只是简单地将 background:black; 添加到包含 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.

我使用的css代码是:

The css code I am using is:

.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" />

推荐答案

用黑色背景的 span 元素包裹你的图片.

Wrap your image with a span element with a black background.

.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>

这篇关于css 过渡不透明度淡入淡出背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！