Opacity tabel

Hey,
ik maak voor school een website, nu heb ik een tabel waarvan de achtergrond doorzichtig moet zijn, maar de inhoud niet.
Toch zijn beide doorzichtig.
Weet iemand hoe ik ervoor zorg dat de plaatjes in de tabel niet doorzichtig worden?Alvast bedankt voor de hulp!

<style type="text/css">
.opacity {
background-color: black;
opacity:0.5;
filter:alpha(opacity=50);
}
</style>

<center><table border="1" width="100%" height="160">
<tr>
<td class="opacity" width="706" height="154"> <center>

<img src="images/iMac.png" width="142" height="133" /><img src="images/2012-ipodtouch4-product-family.png" alt="" width="83" height="121" /><img src="images/snelste_macbook_pro.png" width="195" height="113" /><img src="images/2012-ipodtouch4-product-family.png" width="83" height="121" /><img src="images/iMac.png" width="142" height="133" /></td>
</tr>
</table>
</center>

De inhoud in een aparte div zetten zonder background

Klopt, als je een aparte div hebt voor de inhoud, wordt het gezien als uitzondering op de div van de omgeving. Bij html gaan specifieke divs altijd voor.

CSS:

.content{
float: left;
}
.background{
background-color: black;
opacity:0.5;
filter:alpha(opacity=50);

HTML:

<div class="content">
<div class="background"></div>
//EN HIER DE IMAGES
</div>

Desire schreef:

CSS:

.content{
float: left;
}
.background{
background-color: black;
opacity:0.5;
filter:alpha(opacity=50);

HTML:

<div class="content">
<div class="background"></div>
//EN HIER DE IMAGES
</div>

Hoe moet ik die onderste code dan precies neerzetten bij deze?

<center><table border="1" width="100%" height="160">
<tr>
<td class="opacity" width="706" height="154"> <center>

<img src="images/iMac.png" width="142" height="133" /><img src="images/2012-ipodtouch4-product-family.png" alt="" width="83" height="121" /><img src="images/snelste_macbook_pro.png" width="195" height="113" /><img src="images/2012-ipodtouch4-product-family.png" width="83" height="121" /><img src="images/iMac.png" width="142" height="133" /></td>
</tr>
</table>
</center>

dat lukt me niet.

dit werkt wel

.opacity {
background-color: rgba(0, 0, 0, 0.5);
}

August schreef:

Eerdere citaten tonen

Desire schreef:

CSS:

.content{
float: left;
}
.background{
background-color: black;
opacity:0.5;
filter:alpha(opacity=50);

HTML:

<div class="content">
<div class="background"></div>
//EN HIER DE IMAGES
</div>

Hoe moet ik die onderste code dan precies neerzetten bij deze?

<center><table border="1" width="100%" height="160">
<tr>
<td class="opacity" width="706" height="154"> <center>

<img src="images/iMac.png" width="142" height="133" /><img src="images/2012-ipodtouch4-product-family.png" alt="" width="83" height="121" /><img src="images/snelste_macbook_pro.png" width="195" height="113" /><img src="images/2012-ipodtouch4-product-family.png" width="83" height="121" /><img src="images/iMac.png" width="142" height="133" /></td>
</tr>
</table>
</center>

dat lukt me niet.

<center><table border="1" width="100%" height="160">
<tr>
<td width="706" height="154"> <center>

<div class="content">
<div class="background"></div>
<img src="images/iMac.png" width="142" height="133" /><img src="images/2012-ipodtouch4-product-family.png" alt="" width="83" height="121" /><img src="images/snelste_macbook_pro.png" width="195" height="113" /><img src="images/2012-ipodtouch4-product-family.png" width="83" height="121" /><img src="images/iMac.png" width="142" height="133" />
</div></td>
</tr>
</table>
</center>

Het werkt niet, maar in ieder geval bedankt voor de moeite. Ik heb besloten de tabel achtergrond gewoon een kleurtje te geven

De opacity; optie in CSS gaat automatisch ook de elementen in de div beïnvloeden (child objects).
Om dat te verhelpen moet je inderdaad geen HEX code gebruiken, maar rgba() als achtergrond waar je als 4e element de doorzichtigheid meegeeft. Wat je ook kan doen is dit.

Jvdw schreef:

dit werkt wel

.opacity {
background-color: rgba(0, 0, 0, 0.5);
}

dit moet het echt wel doen

Jvdw schreef:

Eerdere citaten tonen

Jvdw schreef:

dit werkt wel

.opacity {
background-color: rgba(0, 0, 0, 0.5);
}

dit moet het echt wel doen

... in browsers die HTML5 ondersteunen dus niet de oude IE die nog veel gebruikers gebruiken ...

Antonn schreef:

Eerdere citaten tonen

Jvdw schreef:

Eerdere citaten tonen

Jvdw schreef:

dit werkt wel

.opacity {
background-color: rgba(0, 0, 0, 0.5);
}

dit moet het echt wel doen

... in browsers die HTML5 ondersteunen dus niet de oude IE die nog veel gebruikers gebruiken ...

En de leraren bij mijn opleiding gebruiken massaal internet explorer, omdat het vaker vast hangt ofzo, geen idee.

hier dan dit gebruik ik ook.
DEMO:
http://www.stevenyork.com/demos/css-opacity/
SITE + DOWNLOAD:
http://stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children

Jvdw schreef:

hier dan dit gebruik ik ook.
DEMO:
http://www.stevenyork.com/demos/css-opacity/
SITE + DOWNLOAD:
http://stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children

Thanks, die ga ik morgen wel gebruiken!

August schreef:

Eerdere citaten tonen

Jvdw schreef:

hier dan dit gebruik ik ook.

DEMO:
http://www.stevenyork.com/demos/css-opacity/
SITE + DOWNLOAD:
http://stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children
Thanks, die ga ik morgen wel gebruiken!

als je problemen hebt pb me maar of hier kan ook