本页二维码,扫一扫分享到朋友圈
朋友圈

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


阅读189 评论0 赞 30返回首页    go 编程与技术  go css


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

 

 

代码如下:


<!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>


  下一篇:go 用CSS制作标签云


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:03-15