不透明度应该只影响父母，但不影响孩子(Opacity should only affect parent but no child)

不透明度应该只影响父母，但不影响孩子(Opacity should only affect parent but no child)

我有一个包含图像文本的div ，我想要实现的是降低div的不透明度，以便可以清楚地看到图像。

使用我当前的脚本，当我降低div的不透明度时，它也会影响文本。

但我希望它只影响div

CSS

.page1_text { position:absolute; background-color:#CC3; border-radius:5px 5px 5px 5px; padding:20px; width:80%; left:10%; font-size:16px; opacity: 0.5; }

HTML

<div class="page1_text"> <div>This is my test </div> </div>

I have a div which contains text on an images, and what I'm trying to achieve is to lower the opacity of the div so the images can be seen clearly.

with my current script, when I lower the opacity of the div it affects the text too.

but i want it to only affect the div only

CSS

.page1_text { position:absolute; background-color:#CC3; border-radius:5px 5px 5px 5px; padding:20px; width:80%; left:10%; font-size:16px; opacity: 0.5; }

HTML

<div class="page1_text"> <div>This is my test </div> </div>

最满意答案

如果在div上使用不透明度，它将影响div中的所有内容

使用带alpha的背景颜色

background-color: rgba(204, 204, 51, 0.5);

最后的0.5是alpha（不透明度），我使用photoshop获得了值，但我确信还有其他方法可以将hex转换为rgb

有关详细信息，请参阅https://css-tricks.com/rgba-browser-support/

If you use opacity on the div, it will affect everything in the div

Use background colour with alpha

background-color: rgba(204, 204, 51, 0.5);

the 0.5 at the end is the alpha(opacity), I got the values using photoshop but I am sure there are other ways to convert hex into rgb

for more info see https://css-tricks.com/rgba-browser-support/