有文本的透明箱子在图象 [英] Transparent box with text over image

问题描述

我需要帮助来创建居中的透明文本框。我搜索，搜索和搜索，但我没有找到正确的答案。让我们说，我有这个代码：

 < div class =grid12-6> 
 
< img src =image-url> 
< h2>时尚手链< / h2> 
< button>查看更多< / button> 
 
< / div> 
  

，我需要这样的：

我将非常感谢任何帮助。

HTML

 < div class =grid12-6> 
 
< img src =http://i.stack.imgur.com/XRN4Y.jpg> 
< div class =inner_box> 
< h2>时尚手链< / h2> 
< button>查看更多< / 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按钮{
 background：#aaa; 
 color：#fff; 
 text-transform：uppercase; 
 font-weight：bold; 
 font-size：16px; 
 border：none; 
 padding：10px 30px; 
} 
  

在上述代码中，使用虚拟映像相应地更改并查看结果较小的字体大小，可能需要颜色更改

I need help to create centered transparent box with text over image. I searched, searched and searched, but I didn't find right answer. Let's say, I have this code:

<div class="grid12-6">

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

</div>

and I need something like this:

I will be very grateful for any help.

解决方案

Created a much similar thing but you might have to do little cosmetic changes.

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

In the above code you dummy image is used change it accordingly and see the result minor font size, color changes might be necessary

这篇关于有文本的透明箱子在图象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！