여러 이미지 선택 배경 이미지

Question

여기 거래가 있습니다. 배경 이미지가있는 <select multiple> 태그가 있습니다. 이제 아래로 스크롤 할 때마다 배경 이미지가 텍스트 위로 이동하지 않습니다. 그리고이 효과를 얻을 수 :

는

왼쪽 그림은 이전에 내가 내가 내가 아래로 스크롤 때까지 이동하려는

스크롤 오른쪽입니다. 그래서 각 줄은 같은 색을 유지합니다.

어떻게해야합니까?

Answer 1

질문에 대한 답변이 아니지만 대신 option에 각각 배경색을 지정하는 것이 더 바람직하지 않습니까?

Primitive JSFiddle example

배경 화상 접근법은 실패 할 수밖에 예컨대 사용자가 글꼴 크기를 늘리면 jQuery로 (이하 준수/현대적인 브라우저),

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

또는 :

Answer 2

나는 select 요소에 작동하는지 모르겠지만, 아마도

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

배경 - 사용 얼룩말 줄무늬를 시뮬레이트하기위한 select의 이미지는 여러 브라우저, 글꼴 크기, 플랫폼에서 안정적으로 작동하지 않을 수 있습니다 ...

Answer 3

왜 직접적으로 backgrou 각 행에 대한 색상?

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

이 잘 (대신에 스타일 속성의 사용 CSS 클래스)

Answer 4

당신은 달성 할 수있는 작동하는 jQuery의 홀수 또는 짝수 선택기를 사용하여. 예를 들어

당신은 할 경우이 같은 리튬 요소 (2, 4, 6, 8, 10 등) 는 그런 다음 .odd 스타일을 지정할 수 있습니다에 class="odd"을 추가합니다 <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'); 

수업을 원하는대로 할 수 있습니다.