如何为我的标题添加背景效果？

Question

我遇到了一些问题，我必须为我的图片添加标题，其中透明背景为不透明度0.65和黑色，我添加了一个没有背景效果的标题，尽快帮助。 先感谢您。 这是我的代码

 <div class="img-wrap"> <div style="300 px; font-size:20px; text-align:center;background-color= "ff0066;">
<img src="/gadgets.jpg" alt="alternate text" width="220px" height="200px" style="padding-bottom:1.0em;">
<a href="#">Gadgets and Accessories</a>
</div>
<div class="img-info">
<h3><a href="#">Gadgets & Accessories</a></h3>
<a href="#">Tablets</a><br>
<a href="#">Headphones</a><br>
<a href="#">External Optical Drives</a><br>
<a href="#">Flexible Keyboards</a><br>
<h3><a href="#">More...</a></h3>
</div>
</div>

类img-wrap和img-info包含鼠标悬停效果的一些过渡的样式代码，我是否需要为标题创建一个单独的类？

Answer 1

我认为你正在寻找这样的东西：

<强> FIDDLE

标记

<div class="img-wrap">
    <img src="http://placehold.it/220x200" alt="alternate text" width="220px" height="200px" />
    <a class="caption" href="#">Gadgets and Accessories</a>
</div>

CSS

.img-wrap
{
    position:relative;
    height: 200px;
    overflow:hidden;
}
.caption
{
    width:220px; 
    font-size:20px; 
    text-align:center;
    background-color: rgba(0,0,0,.7);
    position:absolute;
    left:0;
    bottom:-25px;
    color:#fff;
    visibility:hidden;
    transition: all, 0.3s ease 0.2s;
}

img
{
    width: 220px;
    height: 200px;
    display:inline-block;
}
img:hover + .caption
{
    visibility:visible;
    bottom: 2px;
    transition: all, 0.3s ease 0.2s;
}