Question

在下面的代码中，有一个不透明度过渡，允许一个图像淡出并显示其后面的图像。将这两个图像叠加在一起的是徽标图像，该图像旨在在转换的整个时间内保持全视图，但在转换播放时它会闪烁。（在chrome和firefox上测试过 - 见过两者）

如何让徽标始终保持在顶部且完全不透明，同时仍然可以使基础图像消失？

请参阅底部的jsfiddle链接以获取工作示例。

HTML

<div>

  <img id="bloomtop"
    src="http://dev.kaizenauto.co/images/colorbloom.jpg">

  <img id="bloombottom"
       src="http://dev.kaizenauto.co/images/greybloom.jpg">

  <img class="img-responsive z99"
       src="http://dev.kaizenauto.co/images/drivenow.png">

</div>

CSS

.z99 {
    z-index:99;
}

#bloomtop,
#bloombottom {
    width:100%;
    height:290px;
    margin-bottom:-290px;
    display:block;
    transition: opacity .7s ease-in-out;
    z-index:1;
}


#bloombottom:hover {
  opacity:0;
}

这一切都在小提琴中起作用：http://jsfiddle.net/ax3dwbyo/2/

感谢。

Answer 1

只需将position: relative添加到.z99 div，就像这样：

.z99 {
     position: relative;
}

这是一个有效的演示：

＆＃13;

.z99 {
	z-index:99;
    position:relative;
}

#bloomtop,
#bloombottom {
	width:100%;
	height:290px;
	margin-bottom:-290px;
	display:block;
	transition: opacity .7s ease-in-out;
	z-index:1;
}


#bloombottom:hover {
  opacity:0;
}

＆＃13;

<div>
  <img src="http://dev.kaizenauto.co/images/colorbloom.jpg" id="bloomtop">
  <img src="http://dev.kaizenauto.co/images/greybloom.jpg" id="bloombottom">
  <img src="http://dev.kaizenauto.co/images/drivenow.png" class="img-responsive z99">
</div>

＆＃13;

<强> jsFiddle

图像受到另一个图像的不透明度转换的影响

1 个答案: