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

最新推荐文章于 2021-06-01 03:42:22 发布

weixin_34415923

最新推荐文章于 2021-06-01 03:42:22 发布

阅读量193

点赞数

本文介绍了一种使用CSS实现的竖型列表布局方法，通过相对定位和绝对定位结合，使文字能够竖直显示并覆盖在图片上。文章详细解释了如何设置元素的位置属性以及使用-webkit-transform来旋转文字。

思路：

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>