六角形图像背景css

Question

如何使用背景图片而不是背景颜色（绿色）？

我想在内侧和侧面使用图像，留下白色边框

问题是当插入图像时，它不会覆盖整个区域。

*, *:after, *:before {
    box-sizing: border-box;
}
body {
    background: rgba(128, 128, 128, 0.37);
    margin: 0px;
    padding: 0px;
}
.xpt {    
    text-align: center;
}
.xpt-hex {
    position: relative;
    z-index: 0;
    color: #fff;
    display: inline-block;
    margin: 80px 5px 75px 5px;
}
.xpt-hex:before {
    content: "";
    position: absolute;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.xpt-hex, .xpt-hex:after, .xpt-hex:before {
    width: 229px;
    height: 143px;
    background: #fff;
    text-align: justify;
    border-radius: 15px;
}
.xpt-ihex {
    position: absolute;
    z-index: 1;
    left: 12px;
    right: 12px;
    top: 6px;
    bottom: 6px;
}
.xpt-ihex, .xpt-ihex:after, .xpt-ihex:before {
    background: #adcf24;
    border-radius: 15px;
}
.xpt-ihex:after, .xpt-ihex:before {
    width: 100%;
    height: 100%;
}
.xpt-ihex:before {
    content: "";
    position: absolute;
    -webkit-transform: rotate(-60deg);
    -moz-transform: rotate(-60deg);
    -ms-transform: rotate(-60deg);
    -o-transform: rotate(-60deg);
    transform: rotate(-60deg);
}
.xpt-ihex:after {
    content: "";
    position: absolute;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}
.xpt-box-inr {
    z-index: 2;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}
.xpt-hex:after {
    content: "";
    position: absolute;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
}

<div class="xpt">
  <div class="xpt-hex"> 
	  <div class="xpt-ihex">
	  <div class="xpt-box-inr"></div> 
    </div>
  </div>
</div>

svg工作

body{background: grey;}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="135px" height="100%" viewBox="87.5 87.5 65 73" xml:space="preserve" preserveAspectRatio="xMidYMid">

<defs>
<pattern id="ashex-img" height="100%" width="150px" patternContentUnits="objectBoundingBox" preserveAspectRatio="xMidYMid slice">
    <image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://screenwriter.kinoscenariy.net/wp-content/uploads/2013/07/boy-102832_1920-150x150.jpg"></image>
</pattern>
</defs>

<path fill="url(#ashex-img)" stroke="white" stroke-width="2" d="M146.38,105.483l-23.467-13.498c-0.785-0.452-1.819-0.7-2.912-0.7c-1.094,0-2.128,0.249-2.911,0.7 L93.62,105.483c-1.605,0.922-2.911,3.173-2.911,5.018v26.99c0,1.847,1.306,4.1,2.91,5.024l23.472,13.5 c0.784,0.45,1.817,0.699,2.909,0.699c1.091,0,2.125-0.249,2.913-0.699l23.468-13.5c1.605-0.927,2.912-3.18,2.912-5.024v-26.99 C149.293,108.658,147.985,106.406,146.38,105.483z"></path>
</svg>

Answer 1

尝试这个问题

Fiddle example for hexagon with background image

使用pseudo元素