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

Question

我是CSS和HTML的新手，我想知道是否有一种方法可以使用相同的css，但在每个六边形内部都有不同的图像。我想用多张图片代替＆＃39; http://placekitten.com/240/240＆＃39;没有一遍又一遍地复制/编写太多代码。

查看下面的小提琴，看看我的意思：

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