CSS淡入淡出效果背景颜色[重复]

Question

大家好，我用 css 运行淡入淡出效果，效果很好，我想在淡入淡出时更改颜色，但我没有成功。

如果我在没有图像的情况下使用，淡入淡出会改变颜色，但如果我使用 i 图像则不起作用。

示例： 我试过了：

background-color: red;

但我没有成功，无论如何有人知道如何使淡入淡出背景变成不同的颜色？现在只是去白色，它可能会做另一种颜色？

现在我有一个图像，当我将鼠标悬停时出现淡白色效果，我只想将白色更改为红色。

php:

<img id="slide-img-1" src="<?php echo get_bloginfo('template_directory');?>/public/images/get_.jpg" class="slide fade " alt="" />

css:

.fade {
   opacity: 1;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;


   }

   .fade:hover {
      opacity: 0.5;
      }

Answer 1

Here's a Fiddle 覆盖背景：红色；在包含您选择的图像的 div 上。

HTML

<div class="box fade"><img src="http://placehold.it/350x150"></div>

CSS

.box {
  width:350px;
  height:150px;
}

.fade {
  position: relative;

}

.fade:after {
  background-color: red;
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  opacity:0;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover:after  {
  opacity: .5;
}