如何摆脱悬停时图像中的毛刺（Css3悬停效果）

Question

这是我的网站的网址： 网站

如您所见，主页上有一个主要的黄色图像。 实际上有11张图片。 我将它们显示在鼠标悬停上。 悬停图像时，顶部图像会隐藏，底部图像会出现，我已经通过不透明和css3动画进行了此操作以实现平滑过渡。 它们几乎没有问题。

1）当我们将鼠标悬停在图像上时，相应的图像就会出现故障。 （图像变大了然后变小了。它主要出现在镀铬中。此外，在很高的分辨率下，所有图像对齐也会受到干扰。 毛刺仅出现在图像3中

2）我想在所有屏幕上以1280 * 780或2280 * 1600等格式将页面显示为黄色图像。

Answer 1

“小故障”是因为在应用CSS之后，您的img的边距并不完全相同。 黄色part1有5个主要部分。 您将每个像素定义为width:20% ，这最终是根据窗口宽度的流体大小，但是在某些图像的顶部添加了2px / 3px的绝对边距，这与窗口大小无关。

您不应该这样做，因为20%像素可能会得出不同的像素值-在宽度为1000px的窗口中为200px，在宽度为1024px的窗口中为204px。 因此，在不同的窗口大小下，您的img高度也会有所不同。 您的2px / 3px的上边距只能在非常特定的窗口宽度下工作，而不能在大多数其他分辨率下工作。 请记住，所有内容最终都呈现为px 。

查看源代码，HTML和CSS还有很多其他问题。

1）您正在为图片使用<img>标签。 您的#bottom图像嵌套在<p>并被设置为width: 20% <p> width: 20% ，您的#top图像被设置为其父级copy1 - copy5 100% 。 因为它们依赖于不同的父母，所以追踪每个父母和每个图像的位置，边距，填充物是很乏味和累人的。 当您希望事物被完全覆盖时，请尝试使其保持一致并使其更具可预测性。

2）具有多个具有相同id标签是不合法的，例如#bottom 。

您可以/应该做什么：

1. 重做图像（Photoshop或其他），以确保它们完全对齐，而无需CSS边距。

2. 完成1之后 ，重做HTML和CSS以使其更好/更合法。 我也鼓励您使用inline-block而不是浮点数。 这里有一个示例（我将类名尽量保持与您的名字尽可能接近，并保留使用<img>来达到这种效果）：

 .parts1 { position: relative; width: 100%; } .copy { display: inline-block; vertical-align: top; position: relative; width: 20%; } .top { position: absolute; width: 100%; opacity: 0; } .bottom { position: absolute; width: 100%; } .copy:hover > .top { opacity: 1; transition: opacity 1s ease-in-out 0s; } 

 <div class="parts1"> <div class="copy" id="copy1"> <img class="bottom" alt="Bottom1" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/plain1.png" /> <img class="top" alt="Top1" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U2.png" /> </div><div class="copy" id="copy2"> <img class="bottom" alt="Bottom2" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U4.png" /> <img class="top" alt="Top2" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U3.png" /> </div><div class="copy" id="copy3"> <img class="bottom" alt="Bottom3" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U5.png" /> <img class="top" alt="Top3" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U6.png" /> </div><div class="copy" id="copy4"> <img class="bottom" alt="Bottom4" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U7.png" /> <img class="top" alt="Top4" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U8.png" /> </div><div class="copy" id="copy5"> <img class="bottom" alt="Bottom5" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U9.png" /> <img class="top" alt="Top5" src="http://new.lettucebeekids.org/wp-content/uploads/2015/05/U10.png" /> </div> </div> 

如果正确完成此操作，则实际的窗口大小并不重要。 它将缩放到所有大小。