This question already has answers here:
How do I give text or an image a transparent background using CSS?
(28个答案)
3年前关闭。
我需要帮助以图像上方的文本创建居中的透明框。我搜寻,搜寻和搜寻,但找不到正确答案。假设我有以下代码:
我需要这样的东西:
![html - 图像上方带有文字的透明框-LMLPHP html - 图像上方带有文字的透明框-LMLPHP]()
我将非常感谢您的帮助。
的CSS
在上面的代码中,使用了虚拟图像,请相应地对其进行更改,然后查看结果较小的字体大小,可能需要更改颜色
(28个答案)
3年前关闭。
我需要帮助以图像上方的文本创建居中的透明框。我搜寻,搜寻和搜寻,但找不到正确答案。假设我有以下代码:
<div class="grid12-6">
<img src="image-url">
<h2>Fashion Bracelets</h2>
<button>See More</button>
</div>
我需要这样的东西:
我将非常感谢您的帮助。
最佳答案
创建了一个非常相似的东西,但是您可能需要做一些小小的改动。
的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;
}
在上面的代码中,使用了虚拟图像,请相应地对其进行更改,然后查看结果较小的字体大小,可能需要更改颜色
关于html - 图像上方带有文字的透明框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/36425653/