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

前端技术 2023/09/01 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>

本文地址：https://www.stayed.cn/item/2449

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案