Question

我有一个不透明度设置为0.6的div，使其有点透明。嵌套在这个div中，我使用SVG添加线条和形状，我希望它是不透明的。小提琴显示了一个简单的例子：

div中带有红色背景的绿色圆圈继承了红色背景的div的不透明度。红色div下方的绿色圆圈显示它没有任何透明度 - 这就是我想要在红色背景上看的方式。

<div style="width: 160px;height: 140px;background-color: red;opacity: 0.6;">
  <svg width="160" height="140">
    <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
  </svg>
</div>
<svg width="160" height="140">
  <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
</svg>

如何将绿色圆圈嵌套在红色div不透明？

Answer 1

0.6不透明度适用于整个div（包括它的内容）。子元素无法覆盖其父元素的不透明度。

您唯一的选择是将红色背景移动到SVG中。

<div style="width: 160px;height: 140px;">
  <svg width="160" height="140">
      <rect width="100%" height="100%" fill="red" opacity="0.6"/>
    <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
  </svg>
</div>
<svg width="160" height="140">
  <circle cx="40" cy="40" r="15" fill="green" fill-opacity="1">    </circle>
</svg>

Demo here

Answer 2

您应该使用rgba(255,0,0,0.6)颜色来仅设置背景不透明度。

您实验的行为是正常的，不透明度一直适用于元素，孩子和孩子。包括文字。

http://jsfiddle.net/vLV5h/7/

填充嵌套在透明div中的SVG对象的不透明度

2 个答案: