html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

css实现文字层浮在图片之上示例代码_Div+Css教程

[ ] 已经帮助:人解决问题

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

 

 nTVHTML5中文学习网 - HTML5先行者学习网
代码如下: nTVHTML5中文学习网 - HTML5先行者学习网

复制代码
代码如下:
nTVHTML5中文学习网 - HTML5先行者学习网
<!DOCTYPE html> nTVHTML5中文学习网 - HTML5先行者学习网
<html lang="zh-CN"> nTVHTML5中文学习网 - HTML5先行者学习网
<head> nTVHTML5中文学习网 - HTML5先行者学习网
<meta charset="utf-8" /> nTVHTML5中文学习网 - HTML5先行者学习网
<title>说明</title> nTVHTML5中文学习网 - HTML5先行者学习网
<meta name="keywords" content="关键词" /> nTVHTML5中文学习网 - HTML5先行者学习网
<meta name="description" content="摘要" /> nTVHTML5中文学习网 - HTML5先行者学习网
<link href="css/global.css" rel="stylesheet" type="text/css" /> nTVHTML5中文学习网 - HTML5先行者学习网
<!--[if IE]> nTVHTML5中文学习网 - HTML5先行者学习网
<script src="scripts/js/html5.js"></script> nTVHTML5中文学习网 - HTML5先行者学习网
<![endif]--> nTVHTML5中文学习网 - HTML5先行者学习网
<style type="text/css"> nTVHTML5中文学习网 - HTML5先行者学习网
*{ nTVHTML5中文学习网 - HTML5先行者学习网
padding:0; nTVHTML5中文学习网 - HTML5先行者学习网
margin:0; nTVHTML5中文学习网 - HTML5先行者学习网
} nTVHTML5中文学习网 - HTML5先行者学习网
.images-content{ nTVHTML5中文学习网 - HTML5先行者学习网
position: absolute; nTVHTML5中文学习网 - HTML5先行者学习网
z-index: 1; nTVHTML5中文学习网 - HTML5先行者学习网
left: 0; nTVHTML5中文学习网 - HTML5先行者学习网
bottom:0; nTVHTML5中文学习网 - HTML5先行者学习网
width: 100%; nTVHTML5中文学习网 - HTML5先行者学习网
color: #fff; nTVHTML5中文学习网 - HTML5先行者学习网
background: rgba(0,0,0,.7); nTVHTML5中文学习网 - HTML5先行者学习网
height: 54px; nTVHTML5中文学习网 - HTML5先行者学习网
line-height: 54px; nTVHTML5中文学习网 - HTML5先行者学习网
overflow: hidden; nTVHTML5中文学习网 - HTML5先行者学习网
} nTVHTML5中文学习网 - HTML5先行者学习网
.images-wrapper{ nTVHTML5中文学习网 - HTML5先行者学习网
width:251px; nTVHTML5中文学习网 - HTML5先行者学习网
height:330px; nTVHTML5中文学习网 - HTML5先行者学习网
position:relative; nTVHTML5中文学习网 - HTML5先行者学习网
} nTVHTML5中文学习网 - HTML5先行者学习网
</style> nTVHTML5中文学习网 - HTML5先行者学习网
</head> nTVHTML5中文学习网 - HTML5先行者学习网
<body> nTVHTML5中文学习网 - HTML5先行者学习网
<div class="images-wrapper"> nTVHTML5中文学习网 - HTML5先行者学习网
<img src="images/goods-1.jpg" alt="商品111" title="商品1"/> nTVHTML5中文学习网 - HTML5先行者学习网
<div class="images-content"> nTVHTML5中文学习网 - HTML5先行者学习网
1111111111 nTVHTML5中文学习网 - HTML5先行者学习网
</div> nTVHTML5中文学习网 - HTML5先行者学习网
</div> nTVHTML5中文学习网 - HTML5先行者学习网
</body> nTVHTML5中文学习网 - HTML5先行者学习网
</html>
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助