---
title: "Genoskinlig bakgrund i en tabell..."
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/99093-genoskinlig-bakgrund-i-en-tabell"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "mattiasnordin"
published: "2004-03-09T16:20:27.000Z"
updated: "2004-03-10T11:11:27.000Z"
replies: 10
views: 382
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/99093-genoskinlig-bakgrund-i-en-tabell"
---

# Genoskinlig bakgrund i en tabell...

## #1 — mattiasnordin, 2004-03-09T16:20Z

Hej, 

Jag försöker få till effekten av en tabell som innehåller en halvgenomskinlig vit bakgrund. Texten i tabellen vill jag ska vara skarp som vanligt. 

```
 STYLE="filter:alpha(opacity=35)"
```

 i table taggen fungerar bra. Men då blir även texten transparent. Några förslag?
:)

Permalänk: https://www.webforum.nu/p/99093

## #2 — LeonL, 2004-03-09T16:27Z

Fungerar det om du ger texten en bestämd färg då?

```
STYLE="filter:alpha(opacity=35);color:#000000;"
```

Permalänk: https://www.webforum.nu/p/1294765

## #3 — mattiasnordin, 2004-03-09T16:35Z

Nej det blir samma resultat... :(

Jag tänkte att om jag skapade en tabell med en bakgrundfärg och gjorde ytterligare en tabell i denna så skulle bara opaciteten gälla för tabell nummer ett. Men så verkar inte vara fallet... Grrr..

```
<div id="layer_show_ping_info" style="position:absolute;left:236px;top:460px;">
	<table><td bgcolor=white STYLE="filter:alpha(opacity=50); color:#000000;" style="border:1px solid gray"><!---- bgcolor table ---->
	<table border=0 width=550><td colspan=4 style="border-bottom: 1px solid gray;">
```

Permalänk: https://www.webforum.nu/p/1294769

## #4 — LeonL, 2004-03-09T16:45Z

Ganska smart lösning. Problemet är att den tabellen då ärver egenskapen från den förra tabellen. Testa med att sätta 100 % opacitet på tabellen.

Permalänk: https://www.webforum.nu/p/1294777

## #5 — mattiasnordin, 2004-03-09T16:48Z

Det var min tanke att det skulle gå med 100% i den innersta tabellen men det verkar som att 100% är 100% av opacitet = 50 även i den innersta tabellen. Max är alltså lika som den yttersta. Fortfarande grrr...

Permalänk: https://www.webforum.nu/p/1294781

## #6 — ejick, 2004-03-09T16:53Z

Kan du inte göra ett till lager istället?

Permalänk: https://www.webforum.nu/p/1294790

## #7 — nitro2k01, 2004-03-09T17:00Z

Vad sägs om detta då?
Skapa en PNG-bild med 50% transparens och spara som bg.png.

```
 

<script type="text/javascript">
var outstyle="<style type=\"text/css\">"

if (document.all && (navigator.platform == "Win32") && !window.opera )
  outstyle += ".trans {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',sizingMethod='scale')";
else
  outstyle += ".trans {background: url('bg.png')}"

outstyle += "</style>";
// Edit: Jag glömde denna rad förut.

document.write (outstyle);
</script>
...
<table>
<tr>
<td class="trans">
Text text text text text text text text text 

</td>
</tr>
</table>
```

Permalänk: https://www.webforum.nu/p/1294795

## #8 — nitro2k01, 2004-03-09T17:22Z

Lite ny kod... 
Bilden följer med också.

```
 
<style type="text/css">
body	{color: white; }

</style>

<script type="text/javascript">
var outstyle="<style type=\"text/css\">"

if (document.all && (navigator.platform == "Win32") && !window.opera )
  outstyle += ".trans {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png',sizingMethod='scale')";
else
  outstyle += ".trans {background: url('bg.png')}"

outstyle += "</style>"

document.write (outstyle);

function chbg(incolor){
  document.body.bgColor = incolor;
}

</script>

<a href="javascript: chbg('#ff2020');">Röd</a> <a href="javascript: chbg('#20ff20');">Grön</a> <a href="javascript: chbg('#2020ff');">Blå</a>

<table width="95%">
<tr >
<td class="trans">
Text text text text text text text text text 
</td>
</tr>

<tr >
<td class="trans">
Text text text text text text text text text 
</td>
</tr>

<tr >
<td class="trans">
Text text text text text text text text text 
</td>
</tr>

</table>
```

Bilagor:

- [bg.png](https://www.webforum.nu/a/3009.png)

Permalänk: https://www.webforum.nu/p/1294811

## #9 — mattiasnordin, 2004-03-10T08:23Z

Tack alla. 

Jag nöjde mig med följande lösning:

```
<!--- Denna existerar enbart för att skapa den genomskinliga effekten --->
<div id="layer_show_ping_info" style="position:absolute;left:233px;top:460px;">
	<img src="transparent_box.gif" STYLE="filter:alpha(opacity=50);border:1px solid gray">
</div>

	
<div id="layer_show_ping_info2" style="position:absolute;left:235px;top:462px;">
	<table border=0 width=550><td colspan=4 style="border-bottom: 1px solid gray;">
...
```

Skapade en gifbild som jag gjorde genomskinlig. Och skapade ett nytt lager ovanför detta.

Permalänk: https://www.webforum.nu/p/1295084

## #10 — nitro2k01, 2004-03-10T11:08Z

Jag tycker självklart min lösning ovan är den bästa  ;) . Men jag har ett förslag för att göra din egen lösning snäppet bättre:

```
 
<div id="layer_show_ping_info" style="position:absolute;left:233px;top:460px;">
	<img src="transparent_box.gif" STYLE="filter:alpha(opacity=50); -moz-opacity: .5; border:1px solid gray">
</div>
```

 
Detta gör att effekten även fungerar i Netscape 6+ (Aka Mozilla, därav -moz-)

Permalänk: https://www.webforum.nu/p/1295168

## #11 — mattiasnordin, 2004-03-10T11:11Z

Tackar tackar...
 Anledningen till att jag gav din lösning "slutgiltig svar" var pga att det säker är den snyggaste lösningen om sidan ska användas ute på internet. 
Jag har lyxen att kunna diktatera att alla ska använda IIS på nätet jag sitter på för tillfället ;)

Permalänk: https://www.webforum.nu/p/1295170

---

Tråden på webben: https://www.webforum.nu/amne/html-css/99093-genoskinlig-bakgrund-i-en-tabell