当父元素具有不透明度时，禁用子元素的不透明度 [英] Disable opacity on child element when parent element has opacity

问题描述

我有一个容器，透明度为0.8。在背景，我有一个图像透过内容div。
现在，我在这个容器中有我的客户的照片。问题是，它使用父元素的不透明度，因为这个图像的不透明度只是相对于容器而不是正文。

I have a container with an opacity of 0.8. At the background, I have an image that shines through the content div. Now, I have a photo of my client in this container. The problem is, that it uses the opacity of the parent element as the opacity for this image is just relative to the container and not to the body.

我有这个代码：

<div id="contentContainer" style="background: #FFFFFF; opacity: 0.8">
    Content ...
    <img src="..." style="opacity: 1.0" alt="Photo" />
</div>

这不起作用，如下所述。

This does not work, as explained below.

有人有想法吗？

推荐答案

通过将其更改为以下内容来解决此问题：

Solved this problem by changing it to the following:

<div id="contentContainer" style="background: rgba(255,255,255,0.8);">
    Content ...
    <img src="..." alt="Photo" />
</div>

只使用rgba alpha而不是透明度。
现在可以了。

Used just rgba alpha instead of opacity. Now it works.

这篇关于当父元素具有不透明度时，禁用子元素的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！