html - 如何为我的这个 Caption 添加背景效果？

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