Question

这是我网站的网址：Website

您可以看到主页上有一个主黄色图像。实际上有11张图片。我用鼠标悬停显示它们。在悬停图像时，顶部图像隐藏，底部图像出现，我通过不透明度和css3动画完成此操作，以实现平滑过渡。它们中几乎没有问题。

1）当我们悬停在图像上时，各个图像上出现了一个小故障。（图像变得更大而不是变小。它主要出现在镀铬中。加上非常高的分辨率，所有图像对齐也会受到干扰。毛刺只出现在图像3中

2）我想在所有屏幕上将我的页面显示为黄色图像，其天气为1280 * 780或2280 * 1600等。

Answer 1

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

你不应该这样做，因为20%可以评估不同的像素值 - 在宽度为1000px的窗口中它将是200px，在宽度为1024px的窗口中它将是204px。因此，您的img高度也会因窗口大小而异。您的2px / 3px的上边距仅适用于非常特定的窗口宽度，并且无法适用于大多数其他分辨率。请记住，一切最终都会呈现为px。

通过浏览源代码，您还可以在HTML和CSS中遇到其他一些问题。

1）您正在为照片使用<img>标签。您的#bottom图片嵌套在<p>内，并被设置为width: 20%的{{1}}，您的<p>图片的样式为其#top父母，100%。因为他们依赖于不同的父母，所以追踪每个父母和每个图像的位置，边距，填充是很乏味和累人的。当你想要完全覆盖事物时，尽量保持一致并使其更具可预测性。

2）让多个标签具有相同的copy1 - copy5是不合法的，例如id。

你能做什么/应该做什么：

重做图像（Photoshop或其他），以确保它们完全排列而不需要CSS边距。
完成1 之后，重做HTML和CSS以使其更好/合法。我也鼓励你使用#bottom而不是花车。这里有一个示例（我保留了尽可能接近你的类名，并保留使用inline-block来实现此效果）：

＆＃13;

<img>

＆＃13;

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

＆＃13;

如果您已正确完成此操作，则实际窗口大小并不重要。它将扩展到所有尺寸。

如何在悬停时消除图像中的毛刺（Css3悬停在效果上）

1 个答案: