通过CSS+DIV怎么将文字写在图片上方

HTML图片和文字是敛财醣沁并列显示的。如下：

display: inline-block;与定位无关，只是使整个.img-group长宽与图片适应。

2. 文字与背景处理

文字左对齐，我们把文字居中。给.img-tip添加如下代码：

3. 鼠标悬浮特效

现在静态效果已经完成了，接下来，加一下鼠标悬浮出现文本的效果，现在.img-tip添加如下代码，让文本默认隐藏：

代码总汇

HTML

<div class="img-group"> <img src="img/snow.png">
<div class="img-tip">我是雪豹</div></div>

CSS

.img-group { position: relative; display: inline-block;
}
.img-tip { position: absolute; bottom: 0; background: #333; color: #fff; opacity: 0.6; display: none;
}
.img-group:hover .img-tip { display: block; width: 100%; text-align: center;
}