Html 列出渐变色（两种背景色？）

目前，在我的网站上，我使用了一个精确高度的背景图像，这样文本（也是一个精确高度）就可以放在背景图像中的每一行中——不幸的是，它的效果不太好。每当日语字符出现在列表中时，它都会“撞击”线条，因此背景图像会循环到一条新的“线条”上，并在图像中显示大约3倍的其他颜色。我想知道是否有一种更简单、更“恰当”的方法来做到这一点

以下是当前的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 */
}

---

在您的情况下，有一个简单的解决方案（3px是一个小高度）：
在css中：

• 添加“repeat-x”，使背景 调整文本大小时不会垂直重复

• 添加与渐变色之一相等的“背景色”属性

---

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

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

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

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

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

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

您还可以使背景图像更高，因此可以扩展渐变，以避免在列表项的底部出现较大的实心条带，因为它们的高度将被强制扩展

---

编辑：你评论中的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>

使用PHP脚本将

strip

类添加到其他每个列表项中。这样做会使每个列表项成为块元素，如果它是

条带

行之一，则会应用不同的背景。列表项中的任何额外内容都只会使其垂直展开，向下推下下一个内容，但背景颜色将与正确的元素保持一致

---

编辑2:用PHP输出列表

让我们假设您有一个正在迭代的值数组，称为

$myarray

。我们可以循环使用此数组，并将stripe类应用于如下列表项：

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

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

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

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

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

---

完整点说：几乎所有当前浏览器（甚至IE6都出人意料地支持CSS背景渐变）

---

对不起，白色是顶色还是底色？我以前从来没有这样使用过背景规则。@Nisto-颜色会显示在图像未覆盖的任何地方。在这种情况下，图像被设置在顶部，所以你会把底色作为背景色。嗯，我想你误解了我的立场。由于列表中的每个项目都会创建一个新的背景部分，因此它将进一步循环背景部分。列表中的所有内容都被list div包围着，这就是为什么我还制作了listCaption div，也是为什么它看起来如此“高级”。看看这里的一个例子：我如何在PHP中的while循环中使用它呢？我使用背景的原因实际上就是因为这个。不幸的是，所有这些都不起作用。事实上，我刚刚注意到-在Firefox中看起来不太糟糕，但在Opera中，它在渐变中显示了大约1.5px的下一种颜色（这适用于CSS中添加或不添加repeat-x和BG颜色）@Nisto-在这一点上，我只需将图像高度扩展5px，因此列表项有空间改变其高度。在后面的评论中有一个链接-看起来他想要的东西更像斑马条纹而不是真正的渐变。a）但是它是无效的CSS，我的目标是在我的网站上使用有效的CSS。b） 是的，对不起，我不应该用“梯度”来描述我想要的东西。我真正想要的是一个条带列表。@Nisto-你试过我上次编辑的片段了吗？有什么进展吗？没有，实际上我还没试过。现在，我正在寻找一个更好的方法，但是谢谢你的帮助！如果我不能想出更好的办法，我会用它。