將多個圖像添加到此六角形類

Question

我是新來的CSS和HTML，我想知道是否有一種方法，我可以使用相同的CSS，但在每個六邊形內有不同的圖像。我想使用多個圖像來代替'http://placekitten.com/240/240'，而不需要複製/編寫太多的代碼。

退房小提琴下面來看看我的意思：

<div class="pfhex1"> 
    <div class="hexagon hexagon2"> 
    <div class="hexagon-in1"><div class="hexagon-in2"></div> 
    </div></div> 

     <div class="pfhex2"> 
    <div class="hexagon hexagon2"> 
    <div class="hexagon-in1"><div class="hexagon-in2"></div> 
    </div></div> 

http://jsfiddle.net/1v57w6xh/

非常感謝。

Answer 1

您可以創建一個具有不同背景圖像的新類，並將其應用於要更改的div，或使用現有選擇器創建新規則，並將不同的背景圖像應用於該類，如：

.pfhex2 .hexagon.hexagon2 .hexagon-in1 .hexagon-in2 { 
/* different image */ 
}