如何过渡z

本文介绍了如何过渡z-index？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

jsfiddle/vaf6nv36/1/

气球图像可以在苹果图像上缓慢过渡吗？

Can the balloons image slowly transition over the apple image?

我认为我需要更多过渡参数，还是应该使用不透明度？

I think that I need more transition parameters, or I should use opacity?

有人可以帮我吗？

HTML：

<div class="img1"> </div> <div class="img2"> </div>

CSS：

.img1, .img2{ border: 1px solid black; transition: 1s; position: absolute; } .img1{ left: 25%; height: 500px; width: 500px; z-index: 1; background-image: url(cdn.pcwallart/images/balloons-photography-vintage-wallpaper-1.jpg); } .img2{ right: 25%; width: 500px; height: 500px; bottom: 0; z-index: 2; background-image: url(i.pinimg/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg); } .img1:hover{ z-index: 999; }

推荐答案

尽管从理论上讲，您可以过渡 z-index ，这没有多大意义，即不会导致您显然在寻找交叉淡入淡出效果： z-index 值是整数，当您以尽可能小的步长更改它们（整数，无逗号）时，结果将在另一个之前或在另一个之后出现-不会产生过渡在半州之间。如果要在两个元素之间进行连续淡入淡出，则应在 opacity 上使用过渡。

Although theoretically you can transition z-index, it wouldn't make much sense, i.e. would not result in the crossfade effect which you obviously are looking for: z-index values are integers, which - when you change them in the smallest possible steps (integers, no commas) - results in states either before the other one OR behind the other one - no transitional "half states" in between. If you want to do a kind of continuous crossfade between two elements, you should use a transition on opacity.

在您的特定情况下，由于您的DIV不是彼此直接位于上方，而是彼此重叠，因此可以通过使用第二个 DIV 与 img2 （我将其称为类 .img3 ），但其 z索引为0 和以下CSS规则：

In your particular case, since your DIVs are not directly above each other, but only overlap each other, you can solve that by having a second DIV identical to img2 (I called its class .img3), but with z-index: 0 and this CSS rule:

.img1:hover + .img2 { opacity: 0; }

这将使img2消失，但仍显示img3，但这是在 img1之后，给人img1和img2过渡的印象。

This will fade out img2, but still show img3, which however is behind img1, creating the impression of a transition between img1 and img2.

jsfiddle/2a2epLfv/1/

.img1, .img2, .img3 { border: 1px solid black; transition: 1s; position: absolute; } .img1 { left: 20%; height: 300px; width: 300px; z-index: 1; background-image: url(cdn.pcwallart/images/balloons-photography-vintage-wallpaper-1.jpg); } .img2, .img3 { right: 20%; width: 300px; height: 300px; top: 100px; background-image: url(i.pinimg/736x/c1/7b/15/c17b150e93c4e9c50d963b076484bee7--apple-wallpaper-iphone-wallpaper.jpg); } .img2 { z-index: 2; } .img3 { z-index: 0; } .img1:hover+.img2 { opacity: 0; }

<div class="img1"></div> <div class="img2"></div> <div class="img3"></div>