Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html transparent background

I want to create a webpage with transparent background, a table and some text. I have seen posts related to this, but due to my lack of familiarity with css, I somehow cant get my code to work. I just want a transparent background, while this code is making 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

Great thanks for all the answers people. I have solved the problem in another way for the moment. Actually, I writing an iPhone app which uses Webview to display some html. I wanted to give webview a transparent look, which can be achieved by setting the alpha for the webview itself in interface builder. It kinda saying, make my entire web browser 50% transparent. I would like to thank everyone for their help here.

like image 220
user315067 Avatar asked May 02 '10 04:05

user315067


2 Answers

I suggest using rgba instead of opacity, thusly:

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

You can also put the rest of your formatting into CSS like this:

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

Now you can remove the font tags and the attributes of td. All you'd need for td is <td class="leftc"> or with the rightc class for text to the right.

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

like image 185
Jonno_FTW Avatar answered Sep 28 '22 10:09

Jonno_FTW


I believe you're 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 http://css-tricks.com/rgba-browser-support/

like image 21
user295292 Avatar answered Sep 28 '22 08:09

user295292