将多个图像添加到此六角形类

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 */ 
}