2017-02-28 84 views
2

如何使用背景圖像而不是背景顏色(綠色)?六角形圖像背景css

我想利用內部和側面,留下白色邊框

的問題是,當插入圖像,它不包括內部的整個區域的圖像。

*, *: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"> 
 
\t <div class="xpt-ihex"> 
 
\t <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>

回答