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

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

添加'repeat-x'，以便背景文本调整大小时不会垂直重复
添加“背景颜色”属性，该属性等于您的渐变颜色

Answer 2

一个简单的选项是关闭背景图像上的垂直重复，并将列表项的背景颜色设置为与图像底部颜色相同。然后你可以设置你的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类添加到每个其他列表项。这样做会使每个列表项成为块元素，如果它是stripe行之一，则应用不同的背景。列表项中的任何额外内容将导致它垂直扩展，向下推下一个，但背景颜色将保留正确的元素。

编辑2：以PHP格式输出列表

假设您有一个值正在迭代的值数组，称为$myarray。我们可以遍历这个数组并将条带类应用于偶数列表项：

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>

Answer 3

只是完成：几乎所有当前的浏览器（甚至足够IE6）都支持CSS背景渐变。

http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/

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

3 个答案: