jquery - 将边框图像与背景图像对齐；

Question

我有一个用 CSS :before 和 :after 伪元素制作的六边形。我试图在这个网站上重现效果:http://www.upperfirst.com (我知道他们使用 Canvas )

问题是，如果我使用多个元素，则悬停时尺寸的增加不会正确设置动画。我通过使用带有边框的 :before 和 :after 来修复动画。现在我想让图像正常工作，但我似乎无法弄清楚如何将边框图像和中间部分的图像对齐以使其看起来无缝。

这是我目前所拥有的 fiddle :http://jsfiddle.net/uwZ8w/

谢谢!

Answer 1

此答案基于您修改后的代码，该代码使用了 my hexagon technique .关于避免the graphic alignment issue你注意到了，我有两个建议。

1. 将您的图片缩放到您想要的大小，这样您就可以避免像当前那样缩放任何background-size。
2. 同样，避免将 .inner div 的宽度和高度缩放 ​​200%(您不必这样做，它们应该相同大小为 .hexagon div 和您分类为 .before 和 .after 的直接子级)。然而，关于那个……

...我很好奇你为什么完全使用 .inner div，而不是 :before 伪元素(以避免代码困惑)。在我看来，您可能不理解伪元素是什么(因为您的 .inner css 中有一个 content: '';，如果它是不是伪元素而是真实元素)。或者，当您从伪元素切换到真正的 div 时，您不小心将代码留在了那里(无论出于何种原因进行了切换)。