阵容边框图像与背景图像;

Question

我有一个用CSS制作的六边形：before和：after伪元素。我正在尝试重现这个网站上的效果：http://www.upperfirst.com（我知道他们使用画布）

问题在于，如果我使用多个元素，则悬停时的大小增加不会正常生成动画。我通过使用：before和：之后使用边框来修复动画。现在我想让图像正常工作，但我似乎无法弄清楚如何排列边框图像和中间部分的图像，使其看起来无缝。

这是我到目前为止的一个小提琴：http://jsfiddle.net/uwZ8w/

谢谢！

Answer 1

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

1. 让您的图片缩放到您想要的尺寸，这样就可以避免像目前那样进行任何background-size缩放。
2. 同样，避免在.inner宽度和高度范围内缩放200% div（您不应该这样做，它们的大小应与.hexagon相同div和您归类为.before和.after的直系孩子。但是，关于......

...我很好奇你为什么使用.inner div而不是:before伪元素（以避免混乱你的代码）。在我看来，您可能无法理解伪元素是什么（因为您的content: ''; css中有.inner，如果它不是伪元素而是真实元素则无关紧要。当你从伪元素切换到真实div时（无论出于什么原因进行切换），或者你不小心将代码留在那里。