html - 如何转换 z-index？

Question

https://jsfiddle.net/vaf6nv36/1/

气球图像能否在苹果图像上缓慢过渡？

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

有人可以帮助我吗？

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

Answer 1

虽然理论上你可以转换z-index，但它没有多大意义，即不会产生你显然正在寻找的交叉淡入淡出效果:z-index 值是整数，当您以尽可能小的步长(整数，无逗号)更改它们时 - 导致状态在另一个之前或在另一个之后 - 没有过渡的“半状态” ”之间。如果你想在两个元素之间做一种连续的交叉渐变，你应该在 opacity 上使用过渡。

在您的特定情况下，由于您的 DIV 不是直接在彼此之上，而是彼此重叠，您可以通过使用与 img2 相同的第二个 DIV 来解决这个问题(我将它的类命名为 .img3)，但是 z-index: 0 和这个 CSS 规则:

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

这将使 img2 淡出，但仍会显示 img3，但它位于 img1 之后，从而产生 img1 和 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>