opacity - 不透明背景上的图像也在增加不透明度

Question

我使网站的容器具有不透明度：0.8，然后当我在此容器中添加照片时，实际上任何东西，它也显示为相同的不透明度。我想将图像保持在 100% 且不透明。我不确定这实际上将如何解决。我已经尝试专门更改图像 z-index 和不透明度，但这没有用。任何帮助都会很棒。请参阅下面的示例。

查看样品

Answer 1

请阅读说明，例如http://css-tricks.com/rgba-browser-support/：

我们早就有 opacity 属性，它是类似的，但是 opacity 迫使所有后裔元素也变得透明，没有办法对抗它

所以你必须使用例如：

background: rgba(200, 54, 54, 0.5); 

Answer 2

我认为您最好将这些元素的背景设置为半透明，而不是为整个容器添加透明度。这不会影响照片，并使文本和按钮更易于阅读。