【问题标题】:Child with less opacity than parent孩子的不透明度低于父母
【发布时间】:2012-10-23 20:20:44
【问题描述】:

我想知道是否有任何方法可以让孩子比父母更透明。我需要制作一个 div 而不是它所包含的 div 显示,有什么方法可以使用 CSS 实现这一点?

这就是我的目标:我有一个不透明度为 0.6 的背景,左边的元素有 0.8,所以它更暗,但我需要右边的元素更透明。将 alpha 设置为低于父级不起作用,它只会匹配其父级。

【问题讨论】:

  • 你试过了吗?我已经能够让孩子比父母更透明,但还没有弄清楚如何让孩子比父母更 -=opaque=- - 所以看起来很简单。除非您在请求中遗漏了一些内容。 (顺便说一下,我已经用 DIV 做到了这一点,但几乎任何块级元素都应该同样可行。)
  • 我有几个具有不同不透明度的元素,但顶部的元素比整个内容背景更不透明。但现在我需要反过来做,有一个比父母更透明的孩子。

标签: html css opacity


【解决方案1】:

无法使用 CSS 2 完成,但可以使用 CSS 3 http://www.css3.info/introduction-opacity-rgba/
如果您使用rgba for backgournd-color 作为父级,则内部元素将不会变得不透明。

如果你不想用css3,除了把孩子放在父母外面,玩位置,别无他法。

【讨论】:

  • 谢谢 Amr,我已经这样做了。我有一个更透明的背景父元素和更多不透明的子元素,但现在我需要反过来,有一个子元素比它的父元素更透明,即它的背景。
  • 使用 rgba 的“a”减少孩子的不透明度
  • 这只是让孩子匹配其父母,我正在用我需要实现的图像更新我的问题。
  • 如果你仔细观察,你会发现孩子实际上比父母更暗,因为重叠的透明度。在 CSS 中,您将孩子设置为更透明,但它不会转化为它的外观。这就是我目前对其他元素(图像左侧的正方形)所做的事情。
【解决方案2】:

根据您的情况,您可以尝试以下任何一种方法:

  1. 给孩子position:absolute 并使用 CSS 将其移动到父 div 前面您想要的位置。
  2. 将子级或父级转换为图像,然后根据需要在另一个上使用不透明度。
  3. 使用 CSS 3:http://www.css3.info/preview/opacity/

CSS 3 技术在各种浏览器中的兼容性:http://caniuse.com/css-opacity

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-10-12
    • 2020-12-15
    • 2013-04-08
    • 1970-01-01
    • 2013-03-15
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多