如果某个部分的不透明度设置为某个值,如何更改或禁用其中图像的不透明度?代码演示:
CSS
#example1{
opacity:0.8;
}
HTML
<section id="example1">
...
<img src="a.png">
...
</section>
那么如何更改 a.png 的不透明度?
最佳答案
您无法更改父 div 内的任何子级的效果。
让我这样解释一下,opacity
正在父容器上设置。然后,子级位于父级内部,并舒适地嵌套在其中。
所以我们有这个,
--父级(不透明度开始)
-----子级
-----子级
--End Parent(不透明度结束)
由于子级嵌套在父容器内,因此它们将由于父容器是透明的而变得透明。
正如其他人所说,有几种方法可以解决这个问题。
一种方法是使用
rgba()
(红色、绿色、蓝色、alpha)用于透明背景颜色在父级内部创建一个子级,定位为
absolute
像这样的透明背景,
--父<section>
-----透明绝对子元素
-----子级
-----子级
--结束父</section>
我的最后一个例子,一个有趣的例子,是用哈利·波特来解释这一点的。
在书中,哈利收到了一个隐形时钟。有了这斗篷,一旦穿上,就能让他隐身!这与您的示例完全相同,只是您可以控制对象的透明度!
我们来了,
--斗篷(父级)
-----哈利·波特( child )
--结束斗篷(最终父级)
由于他在斗篷内,因此他是隐形的,就像你的子元素一样。
关于OP的问题,
Okay remove the opacity on the #mainWrapper now, where ever you are using this color, #29630E, replace it with, rgba(41, 99, 14, 0.9), and you will not have everything being transparent. What you are doing, without realizing, is making everything on that page transparent. The text, color, images, everything transparent. With the use of rgba you will only be making the background color transparent.
关于html - 更改图像不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20386043/