Question

我希望能够用图像背景替换一些绿色背景......这可能是我现在使用的CSS，还是我需要另外的CSS布局才能实现？< / p>

这是CSS的参考：

.hex {
    float: left;
    margin-left: 3px;
    margin-bottom: -26px;
}
.hex .top {
    width: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex .middle {
    width: 104px;
    height: 60px;
    background: #6C6;

}
.hex .bottom {
    width: 0;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex-row.even {
    margin-left: 53px;
}

HTML的片段：

<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"</div></div>
<div class="hex"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div>

Answer 1

我想是的，我会使用:nth-child()。例如，如果每个第三个六边形都需要背景图像，但它们需要相同的图片：

.hex:nth-child(3n) {background-image: url('third.png');}

虽然您可以手动选择需要更改背景的那些：

.hex:nth-child(19) {background-image: url('bg19.png');}    
.hex:nth-child(26) {background-image: url('bg26.png');}

等等。

Answer 2

HTML

<div class="hex "><div class="bbc "></div><div class="middle abc"></div><div class="bbb "></div></div>

CSS

.hex .abc
 {
    background:red;

 }
 .bbc
 {
    border-bottom: 30px solid red;
    width: 0;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
 }

 .bbb
 {
    width: 0;
    border-top: 30px solid red;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
 }

进行这些更改并尝试

将背景图像放在CSS六边形中？

2 个答案: