opacity
Стиль влияет на весь элемент , и все в нем. Правильный ответ - вместо этого использовать цвет фона rgba.
CSS довольно прост:
.myelement {
background: rgba(200, 54, 54, 0.5);
}
... где первые три числа - это значения красного, зеленого и синего цвета фона, а четвертое - значение альфа-канала, которое работает так же, как и opacity
значение.
См. Эту страницу для получения дополнительной информации: http://css-tricks.com/rgba-browser-support/
Обратной стороной является то, что это не работает в IE8 или ниже. На странице, на которую я ссылался выше, также перечислено несколько других браузеров, в которых он не работает, но все они уже очень старые; все используемые браузеры, кроме IE6 / 7/8, будут работать с цветами rgba.
Хорошая новость заключается в том, что вы можете заставить IE работать и с этим, используя хак под названием CSS3Pie . CSS3Pie добавляет ряд современных функций CSS3 к более старым версиям IE, включая цвета фона rgba.
Чтобы использовать CSS3Pie для фона, вам необходимо добавить -pie-background
в свой CSS определенное объявление, а также behavior
стиль PIE , чтобы ваша таблица стилей выглядела следующим образом:
.myelement {
background: rgba(200, 54, 54, 0.5);
-pie-background: rgba(200, 54, 54, 0.5);
behavior: url(PIE.htc);
}
Надеюсь, это поможет.
[РЕДАКТИРОВАТЬ]
Как уже упоминалось, вы можете использовать filter
стиль IE с gradient
ключевым словом. Решение CSS3Pie фактически использует ту же технику за кулисами, но избавляет вас от необходимости возиться непосредственно с фильтрами IE, поэтому ваши таблицы стилей намного чище. (он также добавляет кучу других приятных функций, но это не имеет отношения к этому обсуждению)