如何过渡z-index？ [英] How to transition z-index?

问题描述

https://jsfiddle.net/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(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
   }

.img2{
  right: 25%;
  width: 500px;
  height: 500px;
  bottom: 0;
  z-index: 2;
  background-image:  url(https://i.pinimg.com/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.

https://jsfiddle.net/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(http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg);
}

.img2,
.img3 {
  right: 20%;
  width: 300px;
  height: 300px;
  top: 100px;
  background-image: url(https://i.pinimg.com/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>

这篇关于如何过渡z-index？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！