Menu
Is it possible to set transparency of any image in javascript? And how can I do that?
664
The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
With an image or graphic, transparent refers to an image that is clear and can take the effect of any images behind it. Below is an example of the Computer Hope logo with a transparent background. The image is the same but looks different with each of the different colored backgrounds.
A see-through display or transparent display is an electronic display that allows the user to see what is shown on the screen while still being able to see through it.
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
If using plain javascript this should work:
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 + ')';
}
Call by: SetOpacity('myImg', 50); //Half transparent
Source here
149
Yes.
Using jQuery:
$('#yourImageId').css('opacity', .5);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
