Я хотел бы создать простой визуальный эффект для отображения строк данных на iPhone / Android / и т. Д., Как показано в в этом примере .
Эффект очень прост;это два прямоугольника друг на друга, верхний светлее нижнего и с более светлым, но все же верхним краем.Это делает это:
<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>
Теперь я хотел бы иметь возможность размещать текст и метки поверх этого, опять же, как показано в примере .Вот где мне нужна помощь.
Я бы хотел разместить текст относительно «строки», но строка на самом деле состоит из двух элементов, поэтому это сложно.Текст должен располагаться поверх разделов «rowtop» и «rowbottom».
Я пытался возиться с третьим div для меток и устанавливал его z-index, но не мог заставить его делать то, чтоЯ хотел.
Я думаю, что могу использовать фоновое изображение вместо rowtop и rowbottom и упростить для себя, но мне было интересно, есть ли у кого-нибудь умное решение, не основанное на изображениях.
[Обновить]Основываясь на ответе Эдеверетта, я попробовал CSS градиенты, и они отлично работали:
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(50, 50, 50)), color-stop(50%, rgb(0, 0, 0)));