css实现文字层浮在图片之上示例代码

更新时间：2016-12-26整理编辑：建站学习网阅读：0

文字层浮在图片之在做一些当鼠标移到图片上显示描述信息功能是可以使用到，下面与大家分享个实例代码，有类型需求的朋友可以参考下哈，希望对大家有所帮助

每当进行页面布局时，我们都有这样的需求，就是当子元素div高度不确定时父div自适应高度，本文整理的多种方法可以解决此问题，感兴趣的朋友可以参考下 <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>说明</title>
<meta name="keywords" content="关键词" />
<meta name="description" content="摘要" />
<link href="css/global.css" rel="stylesheet" type="text/css" />

<style type="text/css">
*{
padding:0;
margin:0;
}
.images-content{
position: absolute;
z-index: 1;
left: 0;
bottom:0;
width: 100%;
color: #fff;
background: rgba(0,0,0,.7);
height: 54px;
line-height: 54px;
overflow: hidden;
}
.images-wrapper{
width:251px;
height:330px;
position:relative;
}
</style>
</head>
<body>
<div class="images-wrapper">
<img src="images/goods-1.jpg" alt="商品111" title="商品1"/>
<div class="images-content">
1111111111
</div>
</div>
</body>
</html>

本文网址：https://www.dedexuexi.com/divcss/jc/1483.html

本站部分文章搜集与网络，如有侵权请联系本站，转载请说明出处。

标签：技巧