如何转换z-index [英] How to transition z-index

问题描述

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

可以让气球图像慢慢转换到苹果图像上吗？

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

有人可以帮忙吗？

html

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

CSS

  .img1，.img2 {
 border：1px纯黑色; 
转换：1s; 
位置：绝对; 
} 
 
 .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 {
右：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 上进行转换。

在你的特殊情况下，由于你的DIV不是直接在彼此之上，而只是相互重叠，你可以通过让第二个 DIV 与 img2 （我称它的类为 .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;过渡：1秒; position：absolute;}。img1 {left：20％; height：300px;宽度：300px; z-index：1; background-image：url（http://cdn.pcwallart.com/images/balloons-photography-vintage-wallpaper-1.jpg）;} .img2，.img3 {right：20％;宽度：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;}  

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?

can someone help?

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

解决方案

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.

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

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屋！