I want to give a background color to a div block. The color value is : #ff33cc & alpha=40%; Is there any way of doing this ?? Or can i know the hex value of the resultant color ? else i will have to upload a img file and set it as background, which i dont wan to do. Thanks in Advance.
div { background:#ff33cc; filter:alpha(opacity=40); -moz-opacity:.40; } Code (markup): That should work, BP
Well, i tried that as well background:#ff33cc; filter:alpha(opacity=40); -moz-opacity:.40; but the problem with this is that the text that i write & the img that i put in that div section also gets transparent by 40% Can you suggest something else ??
OK, try this: In you HTML, use somethng like this: <div id="transparent"> Your Code <img src="image" class="notransparent" /> <p class="notransparent">This text isn't transparent</p> </div> HTML: Your CSS: #transparent { background:#ff33cc; filter:alpha(opacity=40); -moz-opacity:.40; } .notransparent { filter:alpha(opacity=100); -moz-opacity:.100; } Code (markup): That will make anything with id="transparent" Code (markup): show at 40% opacity. And everything with class="notransparent" Code (markup): shows up with no transparency, BP
Doesn't work, even after adding the notransparent class to the para it still shows it with the alpha value . Is it working on your system ? Never the less, thanks for your time
Can I see your source, it would probably only take me a min or 2 to fix it, PPM it to me if you don't want to show it, BP
Here it is : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Master</title> <style type="text/css"> *{padding:0; margin:0;} body{padding:0; margin:0 auto; background-color : #ff33cc;} .pagecontainer{margin:auto; width:800px; height:800px; background:transparent url(img/background.gif) top left repeat-y;} .logo{float:left; width:270px; height:75px;} .banner{margin-top:5px; width:530; height:75;} .topline{clear:left; width:800px; height:105px; background:#ff33cc;filter:alpha(opacity=10);-moz-opacity:.10;} .notransparent{filter:alpha(opacity=100);-moz-opacity:.100;} .navi{float:left; margin-top:5px; width:115px; height:800px; background-color:#ffccff;} </style> </head> <body> <div class="pagecontainer"> <div class="logo"> <img src="img/logo.gif" /> </div> <div class="banner"> <img src="img/banner.jpg" /> </div> <div class="topline"> <p class="notransparent">pop po po po p op o po po po p op o</p> </div> <div class="navi"> xa </div> </div> </body> </html> Code (markup): Thanks Again
I cheated with absolute positioning, but it works: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Master</title> <style type="text/css"> *{padding:0; margin:0;} body{padding:0; margin:0 auto; background-color : #000;} .pagecontainer{margin:auto; width:800px; height:800px; background:url(img/background.gif) top left repeat-y;} .logo{float:left; width:270px; height:75px;} .banner{margin-top:5px; width:530; height:75;} .topline{clear:left; width:800px; height:105px; background:#ff33cc;filter:alpha(opacity=40); opacity:.40;-moz-opacity:.40;} .topline p {filter:alpha(opacity=100); opacity:1.0;-moz-opacity:1.0;} .navi{float:left; margin-top:5px; width:115px; height:800px; background-color:#ffccff} </style> </head> <body> <div class="pagecontainer"> <div class="logo"> <img src="img/logo.gif" /> </div> <div class="banner"> <img src="img/banner.jpg" /> </div> <div class="topline"></div> <p style="position:absolute; left: 17px; top: 81px; width: 766px; height: 26px;">pop po po po p op o po po po p op o</p> <div class="navi"> xa </div> </div> </body> </html> HTML:
@BP(rep added) Well, that does not work in Mozilla, but works well in IE. Thanks @Arnold9000 Thanks. This will save me a lot of time. How do we calculate it ?
Here is an example (with explanation) of opaque text over an alpha background: http://www.mandarindesign.com/troops.html#opacitybackgroundhard To calculate the resulting hex color, I would have taken a screen grab, and then used the color picker in PhotoShop. But there are many graphics utilites, even Firefox addons, that would do the job.