Непрозрачность! Важно не работает

Question

Вот мой код:

<tr style="opacity: 0.5;"><td><img style="opacity: 1.0 !important;" src="/img/crap.png"/><div>Some text, etc...</td></tr>

Я не хочу, чтобы изображение отображалось с полной непрозрачностью, а остальные должны иметь непрозрачность только 50%, я пробовал также с атрибутом !important, но это не работает Я также попытался переместить эти стили в класс в файле CSS. Изображение всегда имеет 50% непрозрачности.

Как мне решить эту проблему?

Answer 1

Если у строки таблицы непрозрачность 0.5, тогда для установки непрозрачности <img> просто устанавливается значение 1.0 (или 100%) из 0.5, непрозрачность единицы, если у нее предки.

Чтобы сделать эту работу, вам нужно установить непрозрачность строки таблицы на 1.0.

Answer 2

Существует существующий вопрос о той же проблеме с вашим.

Ссылка идет сюда: Установить прозрачный фон div, но не границы

Стратегия использует CSS "фоновые" свойства с цветом и непрозрачностью:

background-color: rgba(0,255,255,0.4)

Хорошую статью о rgba можно найти здесь: CSS RGBA

Надеюсь, это поможет. :)

Answer 3

Непрозрачность относительно непрозрачности родительского элемента (к сожалению). Таким образом, установив непрозрачность 0,5 для tr, каждый дочерний элемент будет иметь непрозрачность MOST 0,5 ... если вы не используете rgba:

tr {
  background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
  background: rgba(0, 0, 0, 0.5); /* RGBa with 0.5 opacity */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}

Тогда все сверху будет иметь ту непрозрачность, которую вы установили.

Answer 4

Ответ Клайва объясняет это хорошо.

Обход проблемы обсуждается в этом SO-ответе