码迷,mamicode.com
首页 > Web开发 > 详细

用图片做div背景的列表布局 CSS代码

时间:2016-04-16 12:27:33      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

思路:

1.因为是竖型列表,所以外层用 相对定位,这样 在不会重叠在一起 relative

2.里面用绝对位置 absolute,覆盖在图片上面

3.这里有个小技巧,我里面有个特效,文字竖立,并向右旋转90度(webkit 内核)width: 20px; font-size: 20px; -webkit-transform: rotate(90deg);

<div style="position: relative; max-width: 560px; min-height: 115px;">
<img src="/Resources/images/hongbao_ky.png" style="width: 100%; max-width: 560px; min-height: 115px; " />
<div style="position: absolute; color: #ffffff; top: 8%; left: 3%;"><div style="width: 20px; font-size: 20px; -webkit-transform: rotate(90deg); ">2016.1.13</div></div>
<div style="position: absolute; left: 20%; top: 0; color: #211b1a;">
<h2>50&nbsp;&nbsp;&nbsp;&nbsp;代金券</h2>
<h4 >核销号:12312312</h4>
</div>
</div>

技术分享

用图片做div背景的列表布局 CSS代码

标签:

原文地址:http://www.cnblogs.com/linyijia/p/5397960.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!