最新消息:从今天开始,做一个有好习惯的人。

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

前端 迷路的老鼠 1810浏览 2评论

这个东西其实不用多说,很早以前就流行,已经用烂了。只是最近发现还有另外的一些写法,所以记录一下。主要是利用父节点的相对定位来实现浮动层的定位。

父节点

1
2
3
4
5
.images-wrapper{
width:251px;
height:330px;
position:relative;
}

子节点

1
2
3
4
5
6
7
8
9
10
11
12
.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;
}

html示例

1
2
3
4
5
<div class="images-wrapper">

<img title="商品1" alt="商品111" src="http://weitaoc.com/wp-content/uploads/2015/01/20150108141249.png" />
<div class="images-content">1111111111</div>
</div>

20150108141249

转载请注明:迷路的老鼠 » css实现文字层浮在图片之上示例代码

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (2)

  1. 好评!五星!
    wa10年前 (2015-01-10)回复
  2. 咦,上一条删不掉了啊~ position: absolute绝对定位浮层的位置?
    wa10年前 (2015-01-11)回复