html - 更改图像不透明度

标签 html css

如果某个部分的不透明度设置为某个值,如何更改或禁用其中图像的不透明度?代码演示:

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/

相关文章:

html - CSS/HTML 中几种不同的鼠标悬停字体颜色变化

html - CSS relative 应该忽略所有 child ,相对于 parent

java - 使用 jsoup 的网络爬虫

css - 固定标题宽度溢出

javascript - JavaScript/HTML5 的机器可读 (WebIDL) 引用?

javascript - 对齐 TreeView 节点中的文本

javascript - 打开页面时显示 jQuery Lightbox

javascript - 我决定不支持IE7;我现在可以使用哪些 JS/CSS/HTML 功能?

javascript - AngularJS - 不同的行为取决于我首先输入的输入

jquery - 悬停时使用 jquery 为宽度设置动画的多个 div