Geek Answers Handbook

HTML transparent background

I want to create a webpage with a transparent background, a table and some text. I saw posts related to this, but due to my ignorance with css, I somehow cannot make my code work. I just want a transparent background, while this code makes everything transparent. Can someone kindly help.

<html> <head><style type="text/css"> div.transbg {background-color:#4a6c9b; opacity:0.6;} </style></head> <div class="transbg"> <body><Center><font color="#FFFFFF"> <b>Toll Charges</b> <table bgcolor="#000000" cellspacing=3> <tr> <td bgcolor="#009900"><font color="#FFFFFF" align="left"> &nbsp; &nbsp;Class 2 inc Private&nbsp;</font></td> <td bgcolor="#009900"><font color="#FFFFFF" align="right"> &nbsp;A$ 4.95 &nbsp;</font></td> </tr> <tr> <td bgcolor="#009900"><font color="#FFFFFF" align="left"> &nbsp; &nbsp;Class 2 inc Commercial&nbsp;</font></td> <td bgcolor="#009900"><font color="#FFFFFF" align="right"> &nbsp;A$ 13.95 &nbsp;</font></td> </tr> </table> <br> Toll has to be paid within 48 hrs of passage, else an additional A$ 13.95 of administration charges would be added </font></Center> </div> </body> </html>

Update

Thanks so much for all people's answers. I solved the problem differently at the moment. In fact, I am writing an iPhone application that uses Webview to display some html. I would like to give webview a transparent look that can be achieved by setting the alpha for the web view itself in the interface builder. Be that as it may, make my web browser 50% transparent. I would like to thank everyone for their help here.

+6
html css background transparent
source share
4 answers

I believe that you are looking for this,

 .transbg { background-color:#4a6c9b; filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; }

and maybe this is http://css-tricks.com/rgba-browser-support/

+3
source share

I suggest using rgba instead of opacity, this way:

 .transbg {background: rgba(red,green,blue,opacity);}

You can also put the rest of your formatting in CSS as follows:

 body {background-color:#000; color:#fff;} td {background-color: #090; color:#fff;} .leftc {text-align:left;} .rightc {text-align:right;} table {borderspacing: 3;}

You can now remove the font tags and td attributes. All you need for td is <td class="leftc"> or with the rightc class for the text on the right.

See also http://css-tricks.com/rgba-browser-support/

+3
source share

I recently discovered that I want to create an HTML body with a transparent background. (HTML is a localized instructions page for the application, and a “browser” appears that really represents the Webkit view in a different set of views. The Webkit view is on top of the image in the view hierarchy. The background of the web page is transparent, the image from the view is displayed behind the Webkit view. )

To accomplish this, simply copy the HTML as follows, as well as with any other attributes / styles / etc:

 <body bgcolor=transparent>

In other words, use the keyword "transparent" without the quotes, and you will get an alpha of 0 and therefore a transparent background so that all that remains is to show.

(Caveat: in the implementation of the Webkit view, I have it, I also need to make the background color of Webkit transparent in the user interface setup. IE must both be in place for this to work the way I am.)

+2
source share

I'm not sure your requirement makes sense. Just give the background your desired color.

 div.transbg { background-color: #92a7c3; }

Transparency is only interesting for background images or overlay backgrounds that do not appear to be applicable in your particular case.

0
source share

More articles:


All Articles