Как смешать классы CSS для разных результатов

Question

У меня есть таблица, где четным строкам присваивается класс «четный» и нечетные строки «нечетные». Но я также хочу дать классы строк, такие как «полная» или «проблема», которые придают им другие цвета, но я все же хочу, чтобы оттенок цветов был темным или легким, в зависимости от того, четные или нечетные.

Примеры:

<table> 
    <tr class="even problem"> 
    <tr class="odd complete"> 
    <tr class="even complete"> 
    <tr class="odd complete"> 
    <tr class="even incomplete"> 
    <tr class="odd complete"> 
</table> 

Должен ли я создавать отдельные классы для каждой комбинации, или есть какой-то другой способ?

Answer 1

Вы имеете в виду что-то вроде этого?

.even{ 
    background:#ccc; 
} 

.odd{ 
    background:#eee; 
} 

.even.problem{ 
    background:#900; 
} 

.odd.problem{ 
    background:#f00; 
} 

Answer 2

Вы можете создать полупрозрачный PNG-файл с фоном для .complete и других классов, так что цвет фона even и odd класса будет по-прежнему находиться под.

.complete { background: transparent url("path/to/bg.png") top left repeat;}

Я не тестировал его, но могу работать.

Answer 3

Я тоже согласен с идеей Вентуса. Я создал небольшую демонстрацию, но вместо того, чтобы использовать образы с использованием непрозрачности CSS, чтобы дать вам более подробное представление о его идее. Плохое использование непрозрачности CSS в этом примере состоит в том, что ваш текст наследует и непрозрачность.

http://jsfiddle.net/ywhR2/