Question

如果部分不透明度达到某个值，我该如何更改或禁用其中图像的不透明度？代码演示：

CSS

#example1{
    opacity:0.8;
}

HTML

<section id="example1">
    ...
    <img src="a.png">
    ...
</section>

那么如何更改a.png不透明度？

Answer 1

您无法更改父div中任何子项的效果。

让我这样解释一下，在父容器上设置opacity。然后孩子们就位于父母的内部，这些孩子在那里很好地嵌套。

所以我们有了这个，

- 家长（不透明度开始）

-----儿童

- 结束父母（不透明度结束）

由于子容器嵌套在父容器中，因此父容器是透明的，因此它们将变为透明。

正如其他人所说，有几种方法可以解决这个问题。

一种方法是使用rgba()（红色，蓝色，蓝色，alpha）来获得透明背景颜色
让位于absolute的父级内的孩子成为透明背景，

- 家长<section>

-----透明的绝对孩子

-----儿童

- 结束家长</section>

我的最后一个例子，一个有趣的例子，解释这是使用哈利波特。

在书中，哈利收到了一个隐形时钟。有了这件斗篷，一旦穿上，就会让他看不见！这与您的示例完全相同，只是您可以控制对象的透明度！

我们走了，

- 披风（父母）

-----哈利波特（孩子）

- 结束披风（结束父母）

因为他在他的斗篷里面，所以它就像你的孩子元素一样无形。

与OP的问题有关，

好的，现在就删除#mainWrapper上的不透明度，无论你身在何处使用这种颜色，＃29630E，替换为，rgba（41,99,14,0.9），和你不会让一切都透明。你在做什么，没有意识到，正在使该页面上的所有内容都透明。该文字，颜色，图像，一切都透明。随着你使用rgba 只会使背景颜色透明。

Answer 2

您可以像这样使用rgba() property：

rgba(0, 0, 0, .8);

这样的事情：

#example1{
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.8);
}

Answer 3

如果该部分已设置为不透明度，则无法重置其子项的不透明度，但您可以这样做，通过pseude-element设置模糊不透明度，类似这样

section{
position:relative;
}

section:before{
 content:'';
 display:block;
 position:absolute;
 top:0;
left:0;
width:100%;
height:100%;
background:rgba(255, 255, 255, 0.5);
}

然后根据需要使用图像的不透明度

Answer 4

不要更改不透明度的部分，而是更改不是img的子项的不透明度。 Example

section > *:not(img) {
    opacity: 0.2;
}

更改图像不透明度

4 个答案: