如何在Javascript中動態更改圖像不透明度

Question

我使用以下代碼在Javascript中設置圖像透明度，但它只適用於Internet Explorer（並且在FireFox，Opera，Safari和Google Chrome中它仍然不透明）：

img = new Image(); 

img.src = "..."; 

img.style.filter  = "alpha(opacity=75);"; 
img.style.MozOpacity = "0.75;"; 
img.style.opacity  = "0.75;"; 
img.style.KhtmlOpacity = "0.75;"; 

你能幫忙嗎？

Answer 1

問題是字符串中的;，該字符串被假定爲瀏覽器的值的一部分，因此導致無效數字。

你可以只用一個號碼爲opacity屬性：

img.style.filter  = "alpha(opacity=75);"; 
img.style.MozOpacity = 0.75; 
img.style.opacity  = 0.75; 
img.style.KhtmlOpacity = 0.75; 

Answer 2

從這樣的引號內刪除分號：

img.style.filter  = "alpha(opacity=75)"; 
img.style.opacity  = "0.75"; 

或不帶引號一起：

img.style.filter  = "alpha(opacity=75)"; 
img.style.opacity  = 0.75; 

你可以看到它在這裏工作：http://jsfiddle.net/jfriend00/tnDaD/

不再需要MozOpacity和KhtmlOpacity。需要這些的瀏覽器很久很久沒有使用了。

Answer 3

不要給;的值，它會爲你做的:)

img = new Image(); 
img.src = "http://jsfiddle.net/img/logo.png"; 
img.style.opacity = "0.3"; 
document.body.appendChild(img); 

http://jsfiddle.net/Cdjc6/