Как отменить наследование opacity?

Question

[JackShcherbakov]

[Тег JavaScript указан, так как проблему, возможно, можно решить через JS]
Здравствуйте! Недавно столкнулся с проблемой. Каким образом сделать так, что бы все наследуемые св-ва синий блок не наследовал от красного (с opacity есть финт ушами, а что делать, например с font-size !?). Заранее спасибо!
Вот код, наглядно демонстрирующий проблему. https://codepen.io/CitizenOne/pen/PEvgYN

Comments

[Lynn «Кофеман»]

Никак, т.к. тут нет наследования.

Если вам нужен прозрачный фон, сделайте его прозрачным цветом (rgba)

[JackShcherbakov]

Алексей Тен, Мне нужен еще и размер шрифта разный у этих блоков.

[Ankhena]

JackShcherbakov, ну и напишите ему другой размер шрифта

[shadobut]

Почему нельзя сделать родителя с position: relative и ему два дочерних элемента с абсолютным позиционированием.
Первому задаем opacity: .3, а второму opacity: 1; и никакой жопоболи

Answer 1

[Олег]

https://codepen.io/anon/pen/zpQXpX

Answer 2

[Вадим Белкин]

opacity не наследуется, если нужно изменить прозрачность фона, то используйте rgba цвет, если же именно opacity нужно изменить, то необходимо за данный блок вынести все что не должно становится полупрозрачным https://codepen.io/anon/pen/zpVBod