How can I control opacity using CSS? — OZONE Asylum, home of the Mad Scientists

FAQ

How can I control opacity using CSS?

This page's ID: 5015

You are editing "How can I control opacity using CSS?"

Who can edit an FAQ?	Anyone registered may edit an FAQ.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	[code] selector { filter: alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: .5; -khtml-opacity: .5; opacity: .5; /* for future compatibility */ } [/code] The first two are variants for Internet Explorer -- although both will currently work, the second was introduced in IE5.5 and is based on ActiveX technology. This will be the only one supported in the future. [b]Note:[/b] On some elements, IE requires the width or height to be given for the opacity to work. [b]Note 2:[/b] Mozilla [i]had[/i] support for percentage values before, but not any longer. --------------------- Need to do this in Javascript? You can use this function to control those attributes dynamically. Note: in IE you'll [b]need[/b] to have specified the opacity in the style sheet to access the value from Javascript, even if it starts from 100%. Here's a simple little script for you all! [code] function setOpacity(which,num) { if(document.all) document.getElementById(which).filters.alpha.opacity=num; else if(document.getElementById) document.getElementById(which).style.MozOpacity=num+'%'; } [/code] "which" is the id of the object you want to set the opacity for, and "num" is the percentage. Simple, no? ---------------------------- Relevant threads: [url=http://www.ozoneasylum.com/Forum4/HTML/000098.html]Partially transparent background on a div...[/url] [url=http://www.ozoneasylum.com/Forum2/HTML/001089.html]divs - opacity ~[/url] ---------------------------- Relevant note: As of writing this FAQ is number [b]1[/b] at Google in the search for the terms [url=http://www.google.com/search?q=css+opacity]css, opacity[/url] (up from 5 and previously 6) and number 3 for the terms [url=http://www.google.com/search?q=opacity+css]opacity, css[/url]. It is also number 2 for the terms [url=http://www.google.com/search?q=css+partially+transparent]css, partially, transparent[/url] (up from 3). _____________________ [internallink=4626]Emperor[/internallink] [small][i](Added by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Fri 24-May-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=DocOzone]DocOzone [/url] on Fri 24-May-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Tue 03-Sep-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=kuckus]kuckus [/url] on Tue 03-Sep-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=Emperor]Emperor [/url] on Thu 07-Nov-2002)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=HZR]HZR [/url] on Wed 29-Oct-2003)[/i][/small] [small][i](Edited by: [url=http://www.ozoneasylum.com/cgi-bin/ubbmisc.cgi?action=getbio&UserName=HZR]HZR [/url] on Thu 30-Oct-2003)[/i][/small] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu