Html 更改图像不透明度

如果截面不透明度设置为某个值，如何更改或禁用其内部图像的不透明度？代码演示：

CSS

HTML

...
...

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

您可以这样使用：

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);
}

---

如果该部分已经设置了不透明度，则不能重置其子部分的不透明度，但可以这样做，通过pseude元素设置不透明度的模拟，类似这样的操作

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);
}

---

然后根据需要播放图像的不透明度

您不能更改父div内任何子级的效果

让我这样解释，

不透明度

是在父容器上设置的。然后，孩子们被安置在父母里面，父母舒适地嵌套在里面

所以我们有这个

--父级（不透明度开始）

-----孩子

-----孩子

--结束父对象（不透明度结束）

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

正如其他人所说，有几种方法可以做到这一点

• 一种方法是使用

  rgba（）

  （红色、灰色、蓝色、alpha）作为透明背景色

• 将父对象内部的子对象定位为

  绝对

  ，使其成为透明背景，如下所示

--父级

-----透明绝对子对象

-----孩子

-----孩子

--结束父级

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

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

好了

--斗篷（家长）

-----哈利·波特（儿童）

--结束斗篷（结束父级）

因为他在他的斗篷里面，所以他是隐形的，就像你的孩子一样

关于OP的问题

好的，现在，无论你身在何处，移除#main包装上的不透明度 使用此颜色#29630E，将其替换为、rgba（41、99、14、0.9）和 你不会让一切都透明。你在做什么， 在没有意识到的情况下，它正在使该页面上的所有内容透明化。这个 文字，颜色，图像，一切都是透明的。用rgba你 只会使背景色透明

---

更改非img子对象的不透明度，而不是更改截面不透明度

---

这里有类似的问题/答案：（这也被标记为重复）。。。仅供参考。共识似乎是“你不能”。。。我正在将不透明度值从0.8更改为1，但它保持不变。@ImriPersiado:-您使用的是rgba属性吗？@ImriPersiado:-您可以尝试将其放在CSS中而不是HTML中吗？将其更改为CSS:.non_opacity{background:rgb（0，0，0）；background:rgba（0，0，0，0.8）}并且它不起作用。.子部分是：before？因此，图像将被引用到部分：before？没有子对象是图像，：before只是覆盖部分-事实上，模拟不透明度：before也是部分的子对象，但用于模拟我尝试了rgba解决方案，但它不起作用，正如我在下面的回答中提到的，你知道为什么吗？好吧，接下来我要问的是，你想让什么变得透明？谢谢你的努力！！有你这样的人真是太好了：）嗯，我刚检查了一下网站，它看起来并不透明。没问题，祝你的设计好运！

#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);
}

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);
}

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