有文本的透明箱子在图象

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;
}

在上面的代码中，您使用虚拟图像进行相应更改并查看结果次要字体大小，可能需要更改颜色