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;
}

CSS淡化效果背景色

1 个答案: