Почему фоновый цвет: ни один не отменяет заданный цвет фона?

Моя цель состоит в том, чтобы все ячейки в таблице имели цвет фона, кроме тех, у которых класс "прозрачный". Вот пример кода (соответствующий jsfiddle):

<style>
    td { background-color: red }
    td.transparent { background-color: none }
</style>

<table>
    <tr>
        <td>foo</td>
        <td class="transparent">bar</td>
    </tr>
</table>

Почему td.прозрачная ячейка не соответствует правилу td.transparent css? Когда я проверяю элемент, это правило существует, но оно становится переопределяемым правилом td, которое, похоже, нарушает обычные правила спецификации CSS.

Я могу получить то, что хочу, используя rgba(0,0,0,0) вместо none, но rgba не поддерживается в IE8, и я хотел бы избежать использования уродливого взлома, если бы мог.

Я также хотел бы просто понять, почему это не работает так, как я ожидал.

Мысли?

Ответы

Ответ 1

Значение должно быть допустимым цветом, а none не является допустимым цветом. Вместо этого вы можете использовать transparent (аналогично rgba(0,0,0,0), но более широко поддерживается). Если это нехорошо, вы всегда можете пойти с white или использовать более конкретное правило для фона red.

Ответ 2

Для чего это стоит: вы могли бы заменить background-color:none на background: none, и он будет работать.

Ответ 3

Ни один из них не является допустимым цветом, вместо этого используйте transparent.

демоверсия jsFiddle

td.transparent {
    background-color: transparent;
}

В качестве альтернативы вы также можете использовать следующее:

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

td.transparent {
    background: none;
}

jsFiddle с использованием этого метода.

Как примечание, использование цветов CSS3 (rgba) не поддерживается на 100%. Ссылка здесь: http://caniuse.com/css3-colors

Кроме того, я хотел бы сказать, что всего этого можно было бы избежать, если бы вы не установили первоначальный background-color во-первых. Тогда не было бы никакой причины переписывать оригинальный стиль, если бы это было так.

Ответ 5

Другой альтернативой является сброс свойства к значению из родительского элемента (inherit) или к значению по умолчанию, установленному браузером для свойства (initial)

В моем конкретном случае, когда мне нужно было переопределить цвет фона, именно background-color: initial; устранила проблему.