渲染拉斐爾元素在紙上與不透明

我使用拉斐爾2.1.0（raphaeljs.com）沒有問題。其實我正在<div>與opacity: 0.6;繪製元素。很顯然，Raphael元素具有相同的不透明度。渲染拉斐爾元素在紙上與不透明

我想知道是否有任何方法在透明紙（60％）上渲染不透明元素（100％）。

Here是一個JSFiddle來說明我的事情。

我最初的想法是在透明的<div>之上放置一個沒有背景的圖層，這將是我的論文。這樣，它可以給我的Raphael元素提供不透明度（100％）。

但我想我錯過了一個更簡單的方法。

來源

2013-06-11 Mathieu Marques

代替'不透明度：0.6'和背景顏色，請嘗試使用'背景色：RGBA（0， 0,0,0.5）;' –

謝謝，它確實很好。但是因爲它是CSS3（我認爲），它在IE9之前不會工作。你有任何解決方法？ –

您可以使用此漸變生成器：http：//www.colorzilla.com/gradient-editor/，它也可以在IE7-9中使用。 [更新的小提琴]（http://jsfiddle.net/AFTQV/5/） –

從你的小提琴中，我可以看到你有一個叫做#overlay的外部div和一個叫做#paper的div。您正在將您的紙張放入#paper並將background:white; opacity:0.6;樣式應用於#paper本身。

正如在您的問題的評論中提到的，使用background-color: rgba(255,255,255,0.6);而不是opacity是一個選項。但是這對IE 8和其他瀏覽器的老版本不起作用。

一個更加語義的方式做這將是插入一個新的div具有相同的高度#paper#paper前，然後施加負保證金#paper把它上面的新插入div。

<div id="overlay"> 
    <div id="paperbg"></div> 
    <div id="paper"></div> 
</div>

而且你的CSS會是這樣

#overlay { 
    background: #88bb00; 
    height: 400px; 
    padding: 10px; 
    width: 200px; 
} 

#paper { 
    height: 400px; 
    width: 200px; 
    margin-top: -400px; 
} 

#paperbg { 
    width: 200px; 
    height: 400px; 
    background: white; 
    filter: alpha(opacity=60); 
    opacity: 0.6; 
}

更新小提琴：http://jsfiddle.net/shamasis/AFTQV/8/

來源

2013-06-12 07:31:42

謝謝，這基本上是我最初想到的方式（請參閱原始問題）。由於評論中提供的解決方案不能呈現完全相同的顏色，我想我會這樣做。 –

太好了。 :)它也將是跨瀏覽器。不要忘記爲不透明規則添加供應商特定的CSS前綴。 '-moz-opacity'，'-khtml-opacity'等等:) –

渲染拉斐爾元素在紙上與不透明

回答

相關問題