2010-03-07 13 views
6

¿Es posible establecer la transparencia de cualquier imagen en javascript? ¿Y cómo puedo hacer eso?Imagen transparente: ¿es posible en JS?

+0

¿Está utilizando cualquier librería javascript/marco, o simplemente vainilla JS? –

+0

para mí JS es javascript en bruto. Entonces no estoy usando ninguno. – oneat

Respuesta

8

Si se utiliza sin formato Javascript esto debería funcionar:

function SetOpacity(imageid, opacity) { 
    var s= document.getElementById(imageid).style; 
    s.opacity = (opacity/100); 
    s.MozOpacity = (opacity/100); 
    s.KhtmlOpacity = (opacity/100); 
    s.filter = 'alpha(opacity=' + opacity + ')'; 
} 

Llamada por: SetOpacity('myImg', 50); //Half transparent

Source here

+0

Sería más eficiente usar una variable para opacity/100: var decentBrowserOpacityValue = opacity/100, O sea que la opacidad sea un valor entre 0-1, y use s.filter = 'alpha (opacity =' + (opacity * 100) + ')'; – KooiInc

+0

@Kooilnc - Posiblemente, ¿es 1 asignación variable y 1 división más barata que 3 divisiones? No estoy seguro, pero apuesto a que es una diferencia infinitesimalmente pequeña de cualquier manera. En este caso, la gran mayoría de su trabajo es el motor de renderizado del navegador que hace que la imagen sea transparente ... la diferencia en la asignación de variables aquí es una micro-optimización que podría hacer que el código sea menos legible, por lo que tiendo a permanecer alejado en estos casos simples . –

+0

@Nick Craver: en realidad es micro, pero ya sabes cómo es: muchos micros tienden a convertirse en uno grande. Otro punto puede ser la "orientación microsoft" de la función, que aborde en la cláusula OR. Bueno, es una cuestión de gusto, supongo. – KooiInc

3

Sí.

Usando jQuery:

$('#yourImageId').css('opacity', .5); 
Cuestiones relacionadas