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

我有一個不透明度設置爲0.6的div，使它透明一點。嵌套在這個div中，我使用SVG添加了線條和形狀，我希望它是不透明的。小提琴顯示了一個簡單的例子：填充透明div中嵌套的SVG對象的不透明度

與紅色背景的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>

我怎樣才能使嵌套在紅色的不透明的綠色圓圈？

來源

2014-03-29 H82b1

您應該使用rgba(255,0,0,0.6)顏色代替僅設置背景不透明度。

您實驗的行爲是正常的，不透明度一直貫穿整個元素，包括兒童&文本。

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

來源

2014-03-29 01:05:11

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

來源

2014-03-29 03:49:29

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

回答

相關問題