Css : Fond transparent d'un tableau s'applique aux images

**Orionmel** · 29/06/2006, 22h12

Hello world,

Voilà mon problème. J'ai un site avec une image de fond. Je souhaite que les tableaux que j'utilise dans mon site soit semi transparent. Pas de problème, j'ai trouvé le code css permettant de le faire.

Petit problème, si je met une image dans le tableau, elle deviendra elle même transparente. C'est pas vraiment top. J'aiéssayé de créer une classe css avec une opacité de 1 et de l'appliquer à l'image, mais celle ci reste déséspérement transparente.

Quelque a une idée? Voici un exemple de page résumant le problème :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<!-- Test de page avec fond, tableau transparent et image -->
 
<html>
	<style type="text/css">
	<!--
		body{background-image:url(images/divers/fond_accueil.jpg); background-repeat:no-repeat;  color:#FFFFFF; font-family:Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; text-align:center; font-size:10px;}
		td.tabTransparent{background-color:#3d3d3d; color:#FFFFFF; width:100%; filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7; border-style:solid; border-width:1px; border-color:black;}
	-->
	</style>
 
	<body>
	<table>
	<tr>
	<td class="tabTransparent">
		<img src="images/liens/aliveban.jpg" />
	</td>
	</tr>
	</table>
	</body>
</html>

Merci d'avance

**masu** · 29/06/2006, 22h59

Ton tableau ne serai pas la pour faire la disposition de ta page.
Utilise uniquement du css pour la présentation et laisse tombé le tableau.

**Orionmel** · 29/06/2006, 23h02

Ton message ne m'avance pas.

Si tu n'as pas de réponse, évite d'écrire un message inutile merci.

**masu** · 29/06/2006, 23h06

j'ecri ca parce que d'experience melanger le css et les tableau pour la présentation fait perdre beaucoup de temps.
C'etait un conseil que je te donnais pour contourner ton probleme.

**Orionmel** · 29/06/2006, 23h12

Redéveloppez un site terminé me prendra certainement plus de temps.

J'utilise des tableaux car je réutilise les fonctions pour mes sites depuis des années et elles sont toutes à base de tableau. En plus les tableaux ne sont pas encore interdits par les dernières normes w3c à ce que je sache

Quoi qu'il en soit, je ne veux pas que ce sujet devienne une confrontation tableau/css mais plutôt qu'on m'aide à trouver une solution car je dois rendre le site lundi

**masu** · 29/06/2006, 23h28

ton opacite doit-elle etre uniquement sur certaines cellules ou tout le tableau ?
Dans les cellules ou tu a une image y a t-il autre chose ?

**Orionmel** · 29/06/2006, 23h40

Oui en général il y a des images et du text et l'opacité doit s'appliquer à tout le tableau pour créer un cadre transparent.

Je pense qu'il doit suffir d'appliquer un css sur l'image mais je n'arrive pas à trouver comment annuller la transparence juste pour elle

**masu** · 29/06/2006, 23h47

une idee si ton tableau est a une auteur fixe dans la page serait de reprendre ton image fond_accueil.jpg de lui appliqué ta couleur a moitié transparent pour faire une nouvelle image de fond dans ton tableau. tun n'aurait plu besoin de transparence, mais ca donnerai l'illusion.

**Orionmel** · 29/06/2006, 23h49

lol un peu bourrin quand même comme méthode

Mais j'utilise ces tableaux transparents partout donc bon et ils sont dynamiquement créés en php donc je ne peux pas me permettre de mettre quoi que ce soit en dur

**masu** · 30/06/2006, 00h33

Envoyé par Orionmel

Je pense qu'il doit suffir d'appliquer un css sur l'image mais je n'arrive pas à trouver comment annuller la transparence juste pour elle

apparement pas si simple

j'ai fait pas mal de test et je suis arrivé a un truc pas facil a mettre en place mais j'ai pas mieux.

Le truc est de séparer le text et l'image.
La cellule on ne lui applique pas la transparence seulement la couleur et le border.Ensuite on met le text dans un conteneur ou on met le fond et la transparence.
Ensuite on arange la position du texte et de l'image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<table >
  <tr>
    <td class="plain"><img src="pictures.png" width="50" height="80" />
        <div class="Transparent" style="padding-left:50px; _height:80px; min-height:80px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam sed pede. Duis nisi elit, porttitor non, bibendum et, aliquam sed, massa.</div>
		</td>
  </tr>
</table>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
		body{background-image:url(pictures.png); background-repeat:no-repeat;  color:#FFFFFF; font-family:Verdana,Arial,Helvetica,sans-serif; margin:0; padding:0; text-align:center; font-size:10px;}
		td.tabTransparent{background-color:#3d3d3d; color:#FFFFFF; width:100%; filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7; border-style:solid; border-width:1px; border-color:black;}
		.Transparent{background-color:#3d3d3d; color:#FFFFFF; width:100%; filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7;}
		.plain {
		filter:alpha(opacity=100); -moz-opacity:1; opacity: 1;
		border-style:solid; border-width:1px; border-color:black;
		}
		.plain img {
		position:absolute;
		}

le truc penible c'est qu'il y a tu text et de l'image dans la meme cellule, ce qui oblige a un positionnement au cas par cas en fonction de la taille de l'image.

**Orionmel** · 30/06/2006, 09h18

Mmmmhh ca parait jouable, délicat à mettre en place mais jouable

Vais essayer ca ce soir quand je rentrerais du boulot, merci pour ton aide

**Orionmel** · 02/07/2006, 22h21

Trop dur à mettre en place cette solution... Impossible quand tout est géré dynamiquement.

Personne d'autre aurait une autre solution ? C'est quand même dingue qu'un css appliqué à un tableau s'applique obligatoirement à tous les éléments de ce tableau

**Auteur** · 03/07/2006, 00h17

bonjour,

j'ai fait quelques tests de mon côté également et franchment ce n'est pas une mince affaire.

Pour IE curieusement un

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<img src="" style="position: relative">

sur l'image annule la transparence.

Bon ce n'est pas la panacée, pour Firefox par exemple ça ne marche pas.

**declique** · 03/07/2006, 09h51

Bonjour,

La couleur de fond ne s'hérite pas par défaut (voir http://stylescss.free.fr/background-color.html.
Donc je ne pense pas que le fond du tableau se retrouve sur l'image.
Il se peut que l'image elle-même ait un fond transparent (si c'est du gif ou du png). Dans ce cas on peut modifier l'image ou appliquer un fond blanc sur la cellule :
<TD Style="Background-Color:White">
ou sur l'image elle-même:
<IMG Src="..." Style="Background-Color:White">

J'espère avoir été utile.

**Auteur** · 03/07/2006, 10h07

-Je crois que tu confonds la couleur de fond de l'image (qui est en jpg au passage) et la couleur (background-color) du td. Le filtre donne un effet de transparence au background-color mais également à l'image toute entière.

**Orionmel** · 07/07/2006, 09h02

Et bien apparement il n'y a aucune solution à ce jour

Tans pis, les rares tableaux transparents où j'ai des images, je les ai fait opaque. Le site n'est donc pas 100% unis mais c'est mieux que rien.

Je vous remercie à tous.

Ps : Je met pas le tag résolu, on sait jamais... Une solution miracle?

Css : Fond transparent d'un tableau s'applique aux images

Tableau en CSS

Discussions similaires

Partager

Partager