选择多个背景图像

Question

好的就是这笔交易。我有一个带有背景图片的<select multiple>标签。 所以现在每当我向下滚动时，背景图像都不会随文本向上移动。我得到了这个效果：

左图是在之前，右图在我滚动

之后

当我向下滚动时，我希望它向上移动。这样每条线都保持相同的颜色。

关于我该怎么做的任何建议？

Answer 1

为什么不直接为每一行应用背景颜色？

<option style="background-color: #FFF">...</option>
<option style="background-color: #EEE">...</option>

这很好用（使用css类而不是style属性）

Answer 2

不是您问题的答案，但是更不希望为每个option提供单独的背景颜色吗？

Primitive JSFiddle example

背景图像方法必然会失败，例如如果用户增加字体大小。

Answer 3

我不确定它是否适用于select元素，但可能是：

option:nth-child(odd) {
    Background-color: #ffa;
 }

或者，使用jQuery（针对不太合规/现代的浏览器）：

$('option:nth-child(odd)').css('background-color','#ffa');

使用select的背景图片来模拟斑马条纹不太可能在不同的浏览器，字体大小，平台上可靠地工作......

Answer 4

你可以使用jquery的奇数或偶数选择器来实现它。

例如，如果您有<ul> </ul>

<ul id="list">
    <li>Bla bla</li>
    <li>Bla bla 2</li>
    <li>Bla bla 3</li>
    <li>Bla bla 4</li>
    <li>Bla bla 5</li>
</ul>

$('#list li:odd').addClass('odd');

这将为这样的li元素添加class="odd"（2,4,6,8,10等） 然后你可以按照自己的意愿设置.odd类的样式。