在圖像上方有文字的透明框

Question

我需要幫助才能在圖像上創建以文字爲中心的透明框。我搜索，搜索和搜索，但我沒有找到正確的答案。比方說，我有這樣的代碼：

<div class="grid12-6"> 

<img src="image-url"> 
<h2>Fashion Bracelets</h2> 
<button>See More</button> 

</div> 

，我需要這樣的：

我將是任何幫助，非常感謝。

Answer 1

創建了一個非常相似的東西，但你可能不得不做一點整容改變。

HTML

<div class="grid12-6"> 

<img src="http://i.stack.imgur.com/XRN4Y.jpg"> 
<div class="inner_box"> 
    <h2>Fashion Bracelets</h2> 
    <button>See More</button> 
</div> 

</div> 

CSS

.grid12-6{ 
    position:relative; 
} 
.grid12-6 .inner_box{ 
    position:absolute; 
    background:rgba(255,255,255,0.7); 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    padding:35px; 
    text-align:center; 
} 
.grid12-6 .inner_box h2{ 
    font-family:arial; 
    text-align:center; 
    font-size:26px; 
    font-weight:normal; 
    color:#777; 
} 
.grid12-6 .inner_box button{ 
    background:#aaa; 
    color:#fff; 
    text-transform:uppercase; 
    font-weight:bold; 
    font-size:16px; 
    border:none; 
    padding:10px 30px; 
} 

在上面的代碼你虛擬的圖像相應使用的變化，看看結果未成年字體大小，顏色的變化可能是必要的