Question

请原谅我的绝对天真和缺乏理解，我甚至不是初学者。

我试图对齐两组不同的图像，这些图像会褪色以显示下面的不同图像。我已经能够理解足够的代码以使淡入淡出工作但由于某种原因，图片彼此叠加而不是彼此相邻。

我确定这是一个简单的解决办法，但我已经在网上搜索过，我尝试过的任何内容都没有。

这是我目前的代码。

<body style="background-color:black;">

<style>

#cf {
  position:left;
  height:850px;
  width:550px;
  margin:0 auto;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
}

#cf img.top:hover {
  opacity:0;
}


#cf1 {
  position:relative;
  height:850px;
  width:550px;
  margin:0 auto;
}

#cf1 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
}

#cf1 img.top:hover {
  opacity:0;
}

.none {cursor: none;}

</style>

<body>

<div id="cf1"><div id="cf"> 
<p class="none">
  <img class="bottom" src="2.png" />  
  <img class="top"  src="1.png" /> 
</p>
</div>


<p class="none">
  <img class="bottom" src="4.png" />
  <img class="top" src="3.png" />
</p>
</div>



</body>
</html>

图像显示，图像褪色，鼠标消失，所有这些都有效，但无论我如何摆弄定位，它都无法解决我的问题。

Answer 1

首先，从＆＃34; left＆＃34;更改#cf的位置到＆＃34;亲戚＆＃34;。

其次，你不能给所有图像（在你的情况下为-2）提供相同的位置，并期望他们不会互相覆盖。

如果你想要绝对位置，你可以使用伪选择器为图像...定位它们。

通用示例：

#cf img {position:absolute;to:0;left:0;width:100px;height:100px}
#cf img:last-child {left:110px}

对齐2组不同的褪色图像

1 个答案: