通过CSS+DIV怎么将文字写在图片上方
HTML图片和文字是并列显示的。如下：
1. 将文字浮在图片上
我们加个div把图片和文字包在一起，并且加上img-group和img-tip这两个class，便于后面的处理。
我们要让文字浮在图片上面，需要加上定位。看文字浮在了图片的底部。
display: inline-block;与定位无关，只是使整个.img-group长宽与图片适应。
2. 文字与背景处理
文字左对齐，我们把文字居中。给.img-tip添加如下代码：
文字不清楚，我们加上背景和字体颜色，并适当的设置一下透明。给.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;
}
博思aippt
2024-07-20 广告
用CSS往图片上嵌入文字有二种方法，分别如下：
第一种方法、添加一个DIV，采用绝对定位，图片所属DIV为基准。
参考代码如下：
<div style="position:relative;width:100px;height:100px;">
<img src="" alt="" />
<div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
文字
</div>
</div>
第二种方法、图片作为背景图片。
参考代码如下：
<div style="background:url(abc.jpg) no-repeat left top;">
wenzi
</div>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 119px;
top: 14px;
}
-->
</style>
</head>
<body>
<div>此处显示新 Div 标签的内容
<div id="apDiv1">asdfasdf</div>
</div>
</body>
</html>
有具体代码可以供我参考吗？
1.背景
文字文字文字
2.定位
文字文字文字
文字的位置可以根据实际调整。
为了方便说明将样式写在行内了，你可以根据需要放置在头部或样式表里
<img />
|
广告 您可能关注的内容 |
