텍스트 줄의 배경색 바꾸기

Question

우리 프로젝트에서는 화면 크기와 인쇄 크기가 다른 텍스트의 길이가 다른 텍스트 (회색 - 흰색 - 회색 - 흰색 ...)를 번갈아 가며 호출합니다 보기.

행의 단어 수 (또는 행/div/span)가 글꼴 크기 및 브라우저 크기 변경에 따라 변경 될 수 있기 때문에 교대 테이블 행 또는 div가 해결책이라고 생각하지 않습니다.

정말 감사합니다 스티븐 여기

Answer 1

가고, jsFiddle.

글꼴의 줄 높이를 설정 한 다음 배경 크기를 높이의 정확히 두 배로 설정하십시오. 50 % 하드 컬러 스톱을 사용하여 배경에 선형 그래디언트를 적용하고 반복되도록 설정합니다.

jsFiddle은 Webkit 브라우저에서 이것을 표시하기 위해 함께 던진 것입니다. 물론 모든 다른 브라우저에 대한 벤더 특정 코드를 추가해야합니다.

p { 
    line-height: 16px; 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, lightgray), color-stop(51%, white)); 
    background-size: 100% 32px; 
}​