排列帶背景圖像的邊框圖像;

我有一個用CSS製作的六角形形狀：之前和之後：僞元素。我試圖重現在這個網站上的效果：http://www.upperfirst.com（我知道他們使用畫布）排列帶背景圖像的邊框圖像;

問題是，如果我使用多個元素，懸停大小增加不能正確動畫。我使用：before和：after來修改動畫，而不是使用邊框。現在我想讓圖像起作用，但我似乎無法弄清楚如何排列邊框圖像和中間部分的圖像，使其看起來無縫。

這裏是什麼，我至今小提琴：http://jsfiddle.net/uwZ8w/

謝謝！

2012-05-27 alt

只是對「過程」發表評論，但如果生成瓦片非常麻煩以至於存在問題，那麼何時變更策略並執行其他操作會變得有用？ –

通過您的代碼查看，我看到很多分區沒有針對像素的整數值進行故意舍入。您是否遇到像素值在應該被吊頂的情況下變得落地的問題？這會使1像素太小。我看到這個想法的一些暗示性證據，就是當這些線條消失時，八角形的文字略有變化。這意味着它只有一個增長像素點，需要一段時間才能到達，這意味着尺寸計算必須達到寬度向上舍入而不是向下的閾值。 –

你可能會看看[我在這篇文章上的回答]（http://stackoverflow.com/questions/10062887/generate-repeating-hexagonal-pattern-with-css3/10068351#10068351），它不使用邊框來創建十六進制，但轉換。它可能有助於解決您的問題，如何構建十六進制。 – ScottS

這個答案是根據你的修改後的代碼，使用my hexagon technique。關於你注意到的the graphic alignment issue，我有兩個建議。

讓你的圖像縮放到你想他們已經讓你避免任何background-size縮放像你現在正在做的大小。
同樣，避免.inner的div的比例在寬度和高度200%（你不應該這樣做，他們應該是大小相同.hexagon DIV，並且已經列爲.before眼前的孩子， .after）。然而，關於那個...

...我很好奇，爲什麼你在所有使用一個.inner DIV，而不是:before僞元素（以避免弄亂你的代碼）。在我看來，你可能不知道僞元素是什麼（因爲你的.inner css中有一個content: '';，如果它不是一個僞元素，而是一個真實元素，這是無關緊要的）。要麼是這樣，要麼當你從一個僞元素切換到一個真實的div（無論出於什麼原因開關被切換）時，你不小心將該代碼留在那裏。

來源

2012-05-28 20:22:28 ScottS

下面是最終版本：http ：//jacksongariety.com/jacksongariety.com/yourdnaawakening.com/ – alt

@ JacksonGariety--所以你無法從十六進制中消除'background-size'來擺脫這些界限？ – ScottS

這些行是由-webkit-transform-style引起的：preverse-3d;我正在使用。 – alt

排列帶背景圖像的邊框圖像;

回答

相關問題