CSS：背景画像とdivの上のテキストと六角

Question

私は、次のHTMLとCSSのコードを持っている：

.hex { 
 
    width: 150px; 
 
    height: 86px; 
 
    background-color: #ccc; 
 
    background-repeat: no-repeat; 
 
    background-position: 50% 50%; 
 
    background-size: auto 173px; 
 
    position: relative; 
 
    float: left; 
 
    margin: 25px 5px; 
 
    text-align: center; 
 
    zoom: 1; 
 
} 
 
.hex a { 
 
    display: block; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-indent: -9999em; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.hex .corner-1, 
 
.hex .corner-2 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: inherit; 
 
    z-index: -2; 
 
    overflow: hidden; 
 
    backface-visibility: hidden; 
 
} 
 
.hex .corner-1 { 
 
    z-index: -1; 
 
    transform: rotate(60deg); 
 
} 
 
.hex .corner-2 { 
 
    transform: rotate(-60deg); 
 
} 
 
.hex .corner-1:before, 
 
.hex .corner-2:before { 
 
    width: 173px; 
 
    height: 173px; 
 
    content: ''; 
 
    position: absolute; 
 
    background: inherit; 
 
    top: 0; 
 
    left: 0; 
 
    z-index: 1; 
 
    background: inherit; 
 
    background-repeat: no-repeat; 
 
    backface-visibility: hidden; 
 
} 
 
.hex .corner-1:before { 
 
    transform: rotate(-60deg) translate(-87px, 0px); 
 
    transform-origin: 0 0; 
 
} 
 
.hex .corner-2:before { 
 
    transform: rotate(60deg) translate(-48px, -11px); 
 
    bottom: 0; 
 
} 
 
/* Custom styles*/ 
 

 
.hex .inner { 
 
    color: #eee; 
 
} 
 
.hex h4 { 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    margin: 0; 
 
} 
 
.hex hr { 
 
    border: 0; 
 
    border-top: 1px solid #eee; 
 
    width: 60%; 
 
    margin: 15px auto; 
 
} 
 
.hex p { 
 
    font-size: 16px; 
 
    font-family: 'Kotta One', serif; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
} 
 
.hex.hex-3 { 
 
    background: #80b971; 
 
}

<div class="divWithBackgrounImage"> 
 
    <div class="hex hex-3"> 
 
    <div class="inner"> 
 
     <h4>CONTACT US</h4> 
 
     <hr /> 
 
     <p>We Open Everyday</p> 
 
    </div> 
 
    <a href="#"></a> 
 
    <div class="corner-1"></div> 
 
    <div class="corner-2"></div> 
 
    </div> 
 
</div>

問題が負の値とのzインデックスが背後に隠されているということです背景画像。私が肯定的なZ-インデックスを使用する場合、私の六角形にテキストがありません。この問題を解決するには？

Answer 1

CSSシェイプハックよりも多目的な解決策は、SVGを使用することです。例えば：

• が静的​​SVGを有する、いずれか（このスニペットのように）画像またはインラインとして役立っ
• 使用：

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="300" xmlns:xlink="http://www.w3.org/1999/xlink"> 
   
      <polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="#fa5" stroke="blue" stroke-width="5" transform="translate(10)"></polygon> 
   
      <text x="160" y="160" 
   
       font-family="Verdana" 
   
       font-size="30" 
   
       text-anchor="middle" 
   
      > 
   
      Any Text Here 
   
      </text> 
   
  </svg>

  多くの可能性がありますSVGにテキストを含むdivの背景として、またはSVGにテキストを含むようにします（スニペットのように）

• JavaScriptを動的に使用する画像内でテキスト（または色やサイズなどの他の属性）を設定します
• JavaScriptを使用してSVGを完全に生成します（これは私の通常の練習です、それにマイクロライブラリを持っています：hu.js）。
、ますます頻繁にある