css: класс, который смешивает цвет с существующим фоновым цветом? - PullRequest
Новая
       74

css: класс, который смешивает цвет с существующим фоновым цветом?

2 голосов
/ 28 марта 2012

У меня есть таблица со строками чередующихся цветов, например: 

<table>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td></tr>  
</table>

Я хочу выделить группу ячеек таблицы, но по-другому, если ячейка четная или нечетнаястрока, так как несколько вертикально расположенных ячеек могут быть выделены, и я хочу сохранить изменение цвета строки.Сначала я создал два класса highlight_even и highlight_odd, чтобы выяснить в моем коде javascript (как это выделение будет выполняться динамически), является ли строка even или odd, и установитьclass соответственно, например: 

<table>
  <tr class="even"><td></td><td class="highlight_even"></td></tr>
  <tr class="odd"> <td></td><td class="highlight_odd"></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td class="highlight_odd"></tr>  
</table>

Цвета очень простые.Я хочу сделать highlight_even, смешав зеленый с цветом even, и highlight_odd, смешав тот же зеленый с цветом odd.Есть ли способ сделать это в css, чтобы та же подсвеченная таблица могла выглядеть просто так? 

<table>
  <tr class="even"><td></td><td class="highlight"></td></tr>
  <tr class="odd"> <td></td><td class="highlight"></td></tr>
  <tr class="even"><td></td><td></td></tr>
  <tr class="odd"> <td></td><td></td class="highlight"></tr>  
</table>

Что-то вроде (в псевдокоде): 

td.highlight {
    background-color: blend #ff0 into existing background-color;
}

Ответы [ 4 ]

8 голосов
/ 28 марта 2012

Установите цвет фона подсветки с помощью rgba. 

td.highlight {
    background-color: #ff0;
    background-color: rgba(255, 255, 0, 0.5);
}

(где 0,5 - непрозрачность.)

Или для более детального прогрессивного улучшения 

.odd .highlight{
    background-color: /*blend of #ff0 and .odd;*/
}
.even .highlight{
    background-color: /*blend of #ff0 and .even;*/
}
.odd .highlight, .even.highlight{
    background-color: rgba(255, 255, 0, 0.5);
}

Отредактировано для поддержки адресов IE8 -.

2 голосов
/ 28 марта 2012

Почему бы просто не определить смешивание вручную?Вам также не нужно иметь несколько highlight_* классов.Предполагая, что четные строки равны # ff0, а нечетные строки - # f0f и выделение белым цветом: 

tr.even td.highlight { background: #ff8; }
tr.odd td.highlight { background: #f8f; }
0 голосов
/ 28 марта 2012

Привет, вы можете использовать без определения класса в таблице

, теперь вы можете определить в tr color четные или нечетные свойства

следующим образом 

 <table>

    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
    <tr><td>This is one</td></tr>
</table>

tr:nth-child(odd) {background: red;}
tr:nth-child(even) {background: green;}`

и теперь проверьте жить здесь

http://jsfiddle.net/n83K5/1/

0 голосов
/ 28 марта 2012

Вы можете попробовать что-то вроде этого: 

td.highlight {
    background-image: linear-gradient(rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 0) 100%);
}

Это использует CSS3, поэтому оно не будет работать в старых браузерах.И вам придется писать правила для каждого браузера (т.е. background-image: -moz-linear-gradient: ... и т. Д.)

...