html - 列表渐变(两种背景颜色？)

Question

目前，在我的网站上，我使用具有精确高度的背景图像，以便文本(也是精确高度)适合背景图像中的每条“线” - 不幸的是它不起作用太好了。每当日文字符出现在列表中时，它就会“碰撞”该行，因此背景图像会循环到新的“行”上，并在图像中显示大约 3px 的其他颜色。我想知道是否有更简单、更“合适”的方法来做到这一点？

这是当前的 CSS:

div.list{
background-image:url('static/div.png');
margin:25px -25px 5px -25px; /* Just for some space around the list and some removement of the content-padding I have on the site */
}

div.listCaption{
color:#F57F37;
background-color:#D9D9D9; /* So that the listcaption doesn't look like a list-item */
margin-left:-25px; /* This just removes some of the content-padding I have on the site */
padding-left:25px; /* Makes the background for the caption gray */
padding-top:16px; /* Since I have a PHP loop within the list div, I have to make some space between the two lists I have to make it look better */
}

Answer 1

一个简单的选项是关闭背景图像上的垂直重复，并将列表项的背景颜色设置为与图像底部颜色相同。然后您可以将 CSS 设置为如下所示:

div.list {
    background: url("static/div.png") repeat-x left top #fff; /* example color */
    margin:25px -25px 5px -25px;
}

您还可以使背景图像更高，这样您就可以扩展渐变以避免列表项的高度被迫扩展时底部出现大的实心带。

---

编辑:您评论中的 PNG 使事情变得清晰一些。

我不完全确定您是如何设置 HTML 的，但是您可以通过使用有序列表和纯 CSS 来简化整个过程。

<h3>Latest Submissions</h3> <!-- or whatever your title element is -->
<ul>
    <li>Lorem Ipsum</li>
    <li class="stripe">Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
    <li class="stripe">Lorem Ipsum</li>
</ul>

然后您可以按照以下方式使用样式:

li {
    display: block;
    background: #999;
    padding: 3px;
}

.stripe {
    background: #ddd;
}

使用 PHP 脚本将 strip 类添加到每个其他列表项中。这使得每个列表项成为一个 block 元素，如果它是 stripe 行之一，则应用不同的背景。列表项中的任何额外内容只会导致它垂直扩展，将下一个内容向下推，但背景颜色将与正确的元素保持一致。

---

编辑 2: 用 PHP 输出列表

假设您有一个要遍历的值数组，称为 $myarray。我们可以遍历这个数组并应用 stripe 类来甚至列出这样的元素:

for($i = 0; $i < len($myarray); i++) {
    $output = "<li";

    if($i % 2 == 0) {
        $output .= ' class="stripe"'
    }

    $output .= ">" . $myarray[$i] . "</li>";
}

确保此输出包含在 ul 中，因此您需要执行如下操作:

<ul>
    <?php //Put your loop here ?>
</ul>