How to make table background transparent
Permalink
Hi everyone,
I am trying to make a table I've created in a Content block transparent so that the background image shows through. I have tried
opacity: .0; in different combinations in the script i.e. after each line of code for the colour or only certain ones but not others but the whole table and the text go completely transparent and not just the background colour. And there seems to be no options on the table tabs in the Content block to make the background transparent. I have a limited knowledge of html (I copied the below from the content block). Thanks as any help would be great.
Here is what I have at the moment:
<table style="border: 0px solid #282929;" border="0" align="left">
<tbody>
<tr style="background-color: #282929;">
<td style="text-align: left;"><span style="background-color: #282929;">Location: London, United Kingdom</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Height: 5'10'' (177cm)</span></td>
<td style="text-align: left;"><span style="background-color: #282929;"> Appearance: White, Eastern European, Scandinavian</span></td>
<td style="text-align: left;"> Voice character: Friendly </td>
</tr>
<tr style="background-color: #282929;">
<td style="text-align: left;"><span style="background-color: #282929;">Nationality: British</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Weight: 12st. (76kg)</span></td>
<td style="text-align: left;"><span style="background-color: #282929;"> Playing age: 38 - 45 years</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Voice quality: Warm</span></td>
</tr>
</tbody>
</table>
I am trying to make a table I've created in a Content block transparent so that the background image shows through. I have tried
opacity: .0; in different combinations in the script i.e. after each line of code for the colour or only certain ones but not others but the whole table and the text go completely transparent and not just the background colour. And there seems to be no options on the table tabs in the Content block to make the background transparent. I have a limited knowledge of html (I copied the below from the content block). Thanks as any help would be great.
Here is what I have at the moment:
<table style="border: 0px solid #282929;" border="0" align="left">
<tbody>
<tr style="background-color: #282929;">
<td style="text-align: left;"><span style="background-color: #282929;">Location: London, United Kingdom</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Height: 5'10'' (177cm)</span></td>
<td style="text-align: left;"><span style="background-color: #282929;"> Appearance: White, Eastern European, Scandinavian</span></td>
<td style="text-align: left;"> Voice character: Friendly </td>
</tr>
<tr style="background-color: #282929;">
<td style="text-align: left;"><span style="background-color: #282929;">Nationality: British</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Weight: 12st. (76kg)</span></td>
<td style="text-align: left;"><span style="background-color: #282929;"> Playing age: 38 - 45 years</span></td>
<td style="text-align: left;"><span style="background-color: #282929;">Voice quality: Warm</span></td>
</tr>
</tbody>
</table>
Hi enlil,
Thanks so much for your help. I have added the rgba color as you said but when I change the parameter 0.5 to 0.0 to make the whole background transparent, the whole table and text turn into a white block. When I use say, 0.3, 0.4, 0.8 I get lighter or darker versions of black and not transparency. What am I doing wrong? Many thanks again.
Thanks so much for your help. I have added the rgba color as you said but when I change the parameter 0.5 to 0.0 to make the whole background transparent, the whole table and text turn into a white block. When I use say, 0.3, 0.4, 0.8 I get lighter or darker versions of black and not transparency. What am I doing wrong? Many thanks again.
Here's the script as it stands at the moment:
<table style="border: 0px solid rgba(0, 0, 0, 0.5);" border="0" align="left">
<tbody>
<tr style="background-color: rgba(0, 0, 0, 0.5);">
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly </td>
</tr>
<tr style="background-color: rgba(0, 0, 0, 0.5);">
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
<table style="border: 0px solid rgba(0, 0, 0, 0.5);" border="0" align="left">
<tbody>
<tr style="background-color: rgba(0, 0, 0, 0.5);">
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly </td>
</tr>
<tr style="background-color: rgba(0, 0, 0, 0.5);">
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
try adding a "background-color" to the style in the first line
Would the first line then look like this?
<table style="border: 0px solid rgba(0, 0, 0, 0.0);" border="0" align="left" tr style="background-color: rgba(0, 0, 0, 0.0);>
<tbody>
<table style="border: 0px solid rgba(0, 0, 0, 0.0);" border="0" align="left" tr style="background-color: rgba(0, 0, 0, 0.0);>
<tbody>
<table style="border: 0px solid rgba(0, 0, 0, 0.5); background-color rgba (0, 0, 0, 0.5);" border="0" align="left">
Thank you again. However, I added your line but it doesn't save the new code in the script but reverts back to the original line of code.
try clearing cache
Cleared cache but no joy I'm afraid.
Try This
<table style="border: 0; text-align:left; background-color: transparent">
<tbody>
<tr>
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly</td>
</tr>
<tr>
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
<table style="border: 0; text-align:left; background-color: transparent">
<tbody>
<tr>
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly</td>
</tr>
<tr>
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
Many thanks weyboat! That's done the trick. The second row came out as a white block so I the transparent code to the second part of the table in the <tr> thread and all worked just fine.
Thank you weyboat and enlil. You've both been superb.
Thank you weyboat and enlil. You've both been superb.
If you want to vary the transparency, this would do it at 30%
<table style="border: 0; text-align:left; background-color: rgba(0,0,0,0.3);">
<tbody>
<tr>
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly</td>
</tr>
<tr>
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
<table style="border: 0; text-align:left; background-color: rgba(0,0,0,0.3);">
<tbody>
<tr>
<td style="text-align: left;">Location: London, United Kingdom</td>
<td style="text-align: left;">Height: 5'10'' (177cm)</td>
<td style="text-align: left;">Appearance: White, Eastern European, Scandinavian</td>
<td style="text-align: left;">Voice character: Friendly</td>
</tr>
<tr>
<td style="text-align: left;">Nationality: British</td>
<td style="text-align: left;">Weight: 12st. (76kg)</td>
<td style="text-align: left;">Playing age: 38 - 45 years</td>
<td style="text-align: left;">Voice quality: Warm</td>
</tr>
</tbody>
</table>
Thank you weyboat!
Hi...
I'm trying to make a table with a light grey background be partially transparent. Or at least the right hand side of the table...
Is this possible?
This is the code I have done so far after reading the above..
<table background-color: rgba(181, 181, 181, 0.5)...Right now the whole background shows through and I can't see any of the grey...I want it to bleed through the grey of the table sorta like washed out effect.
I'm trying to make a table with a light grey background be partially transparent. Or at least the right hand side of the table...
Is this possible?
This is the code I have done so far after reading the above..
<table background-color: rgba(181, 181, 181, 0.5)...Right now the whole background shows through and I can't see any of the grey...I want it to bleed through the grey of the table sorta like washed out effect.
will give you black, 50% transparency.
If you need to figure the color code you need you can easily open up the core color picker in any instance, select the color you want to use and grab the R, G, and B colors and insert them into the css, the last number (0.5) being the transparency.