手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css实现文字层浮在图片之上示例代码
css实现文字层浮在图片之上示例代码
摘要:代码如下:说明*{padding:0;margin:0;}.images-content{position:absolute;z-index...

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

代码如下:

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

<img src="images/goods-1.jpg" alt="商品111" title="商品1"/>

<div>

1111111111

</div>

</div>

</body>

</html>

【css实现文字层浮在图片之上示例代码】相关文章:

css让背景图片拉伸填充的属性

让多个div在同一行显示的样式及html代码

利用css实现图片等比例缩放

CSS实现左图右文混排布局的方法

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

css按钮自适应实现原理及代码

css实现强制不换行/自动换行/强制换行

实现CSS3中的border-radius(边框圆角)示例代码

css让图片等比例缩小的代码

css清除浮动方法和代码

精品推荐
分类导航