我想创建一个简单的视觉效果，用于在iPhone / Android /等上显示数据行，如this example中所示。
效果很简单;它是两个相互叠加的矩形，顶部的一个比底部的浅，并且有一个较轻但边缘的顶部。这样做：
<style>
.rowtop { background-color: #333; border-top: 1px solid #ccc; height: 25px; }
.rowbottom { background-color: #000; height: 25px; }
</style>
<div class="row">
<div class="rowtop"> </div>
<div class="rowbottom"> </div>
</div>
现在，我希望能够在the example上再次显示文本和标签。这就是我需要帮助的地方。
我想将文本相对于“行”放置，但行实际上由两个div组成，所以它很复杂。该文本必须位于“rowtop”和“rowbottom”div之上。
我尝试使用第三个div来处理标签并设置其z-index但是无法让它做我想要的。
我想我可以使用背景图片而不是rowtop和rowbottom，让自己很容易，但我想知道是否有人有一个聪明的非基于图像的解决方案。
[更新]根据edeverett的回答，我尝试了css渐变，并且效果很好：
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(50, 50, 50)), color-stop(50%, rgb(0, 0, 0)));
答案 0 :(得分：2)
如果您只是定位移动浏览器，则应该可以使用CSS渐变而不是背景图像来获得该效果。
作为旁注，我认为你不应该通过添加额外的div来实现这个效果。如果您（或您的用户）决定将来以不同方式呈现内容和演示文稿，您应该尝试将内容和演示文稿分开。因此，如果CSS渐变不适合您，我建议使用背景图像方法（如果您想要做一些有趣的事情并减少HTTP请求，请查看使用数据URI）。