您的位置：首页 > Web前端 > CSS

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

2013-07-23 17:44 1116 查看


代码如下： 

<!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" /> 
<!--[if IE]> 
<script src="scripts/js/html5.js"></script> 
<![endif]--> 
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航