Sujet Précédent Sujet Suivant

Transparence et opacity

Fermé
patneze Messages postés 4 Date d'inscription mercredi 20 juin 2007 Statut Membre Dernière intervention 21 juin 2007 - 20 juin 2007 à 16:34
mikelangelo Messages postés 285 Date d'inscription vendredi 8 février 2008 Statut Membre Dernière intervention 18 juin 2016 - 7 déc. 2011 à 23:31
Bonjour a tous,

j'ai un probleme pour coder un tableau un peu particulier en HTML.

Je voudrais rendre le fond du tableau transparent et faire en sorte que certaines cellules du tableau ne soient pas transparentes. Mon prob est que les cases qui doivent etre opaques ne le sont pas. Dans mon exemple ci-dessous, il y a toujours une nuance de noir.

Je mets le code en-dessous.

Merci de vos aides 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Texte du titre</title>
<style type="text/css" media="screen">
<!--
 body
  { background-color: black;}
  #case_trans{
    filter : alpha(opacity=5);
    -moz-opacity : 0.5;
    opacity : 0.5;
    font-size:20px;
    font-family:"Arial Black",Arial,sans-serif;
    color: white;
    background: red ;
  }
  #case_opaque{
    filter : alpha(opacity=100);
    -moz-opacity : 1;
    opacity : 1;
    font-size:20px;
    font-family:"Arial Black",Arial,sans-serif;
    color: white;
    background: red ;
  }
  #tableau_trans{
    filter : alpha(opacity=5);
    -moz-opacity : 0.5;
    opacity : 0.5;
    background: transparent ;
    border: 2px solid yellow;
    width: 300px;
    height: 200px;
  }
  #tableau_opaque{
    background: blue ;
    border: 2px solid yellow;
    width: 300px;
    height: 200px;
  }
-->
</style>
</head>
<body>

<div id="tableau_trans">
<table>
<tr>
  <td>
    <div id="case_opaque">
           Texte OPAQUE
    </div>
  </td>
</tr>

<tr>
  <td>
    <div id="case_trans">
           TEXTE TRANSPARENT
    </div>
  </td>
</tr>
</table>
</div>

</body>
</html>

7 réponses

Réponse 1 / 7
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
20 juin 2007 à 16:46
enleve ca de tableau_transp : 
    filter : alpha(opacity=5);
    -moz-opacity : 0.5;
    opacity : 0.5;
    background: transparent ;


ps : ton histoire ca fonctionne sur moz, mais pas IE ;-) (75% du marché)
1
Réponse 2 / 7
patneze Messages postés 4 Date d'inscription mercredi 20 juin 2007 Statut Membre Dernière intervention 21 juin 2007
21 juin 2007 à 15:00
Ah bon, il me semblait que ca marchait aussi sous IE :( C'est peut-etre quand on utilise uniquement des div et non des table ...

En fait pour preciser ma question,
est-ce qu'il est possible de rendre transparent a 50% le fond d'un tableau tout en gardant les ecritures et images completement opaques ? et que cela fonctionne sur IE et mozilla :)

Merci de vos aides.
0
s.spark Messages postés 2480 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 617
21 juin 2007 à 15:15
Il me semble avoir quelque par que non, pour le CSS tout du moins.

PS : j'ai retrouvé ça :

http://www.yoyodesign.org/doc/w3c/css2/tables.html#table-layers
0
Serge_La Messages postés 407 Date d'inscription lundi 19 mars 2007 Statut Membre Dernière intervention 3 mars 2009 47
22 juin 2007 à 07:09
Bonjour,
ah oui les autres fureteurs ont aussi des codes css de transparences. Les codes sont différents par contre.

Serge.
0
Réponse 3 / 7
patneze Messages postés 4 Date d'inscription mercredi 20 juin 2007 Statut Membre Dernière intervention 21 juin 2007
21 juin 2007 à 15:23
Merci pour le lien . Tres instructif.

Dommage qu'il n'y ait pas de solution.
En fait c'est pour un site ou j'ai une image en background. Le prob ets que le texte n'apparait pas de facon tres claire suivant l'endroit de l'image qui est en tache de fond.
DOnc je voudrais que les parties ou il y a du texte soit teinte un peu avec du blanc tout en gardant une certaine transparence.

Voila mon prob a resoudre :)
0
s.spark Messages postés 2480 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 617
21 juin 2007 à 15:39
J'ai un gros doute sur l'esthétisme d'une telle chose.
0
Réponse 4 / 7
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
21 juin 2007 à 15:36
salut,

un image de fond avec transparence (gif pas png) à ton texte. ça donne un effet de papier calque.
0
s.spark Messages postés 2480 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 617
21 juin 2007 à 15:42
C'est une bonne idée, je dirait même sans transparence ! On peut donner de la transparence à une image puis aplatir le calque, et le tour est joué, l'arrière plan (blanc par exemple) et le calque sont fusionner et ca donne un effet de transparence, du coup on est pas obligé d'être en 255 couleur :p
0
patneze Messages postés 4 Date d'inscription mercredi 20 juin 2007 Statut Membre Dernière intervention 21 juin 2007
21 juin 2007 à 16:16
Je connais ce systeme. Le probleme est que je ne veux pas donner la meme couluer de transparence sur toute l'image.

Je peux deja vous montrer mon probleme sur mon site http://cmhb.free.fr

Je voudrais appliquer le calque blanc transparent a 50%, uniquement sur la colonne de texte du milieu.

Une soluce ?
0
s.spark Messages postés 2480 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 617 > patneze Messages postés 4 Date d'inscription mercredi 20 juin 2007 Statut Membre Dernière intervention 21 juin 2007
21 juin 2007 à 16:33
Tu peux mettre une image en background de 1 pixel en repeat-x qui sera en gif, (blanc par exemple si tu veux que ca soit plus clair)qui aura 50% de transparence.

PS : en utilisent un conteneur div.
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > patneze Messages postés 4 Date d'inscription mercredi 20 juin 2007 Statut Membre Dernière intervention 21 juin 2007
21 juin 2007 à 16:55
ouep !

mais pour le {repeat} ne précise rien car il faut répéter en x et en y.

et pour la taille tu peux pousser à 10x10 ou 20x20, c'est pas pour ce que ça pèse et ça soulage un peu le navigateur.
0
s.spark Messages postés 2480 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 617 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
21 juin 2007 à 16:56
En fait c'est exactement ce que tu disais, et dans le contexte c'est parfait ;-)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
Hoshi Messages postés 2 Date d'inscription jeudi 21 juin 2007 Statut Membre Dernière intervention 21 juin 2007 5
21 juin 2007 à 21:51
Bonjour,

l'explication est toute simple, et elle tient au fait que la valeur d'opacité n'est pas absolue mais relative :

Ton tableau (opacité 0,5), contient deux types de cellules :
- transparent (opacité relative 0,5)
- opaque (opacité relative 1)


Comme tes cellules sont contenues dans un tableau lui même transparent, cela donne en opacités absolues :
- transparent = 0,5*0,5 = 0,25
- opaque = 0,5 * 1

La solution est donc de ne pas mettre d'opacité à ton tableau et de définir pour chaque cellule.

Ou peut-être en mettant une opacité supérieur à 1 pour compenser cela pourrait fonctionner (pas encore tester) : pour tes cellules opaques ce serait alors 2
0
Réponse 6 / 7
s.spark Messages postés 2480 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 617
21 juin 2007 à 22:39
Au final sur le site j'ai pas trouvé de tableau avec du texte au milieu, c'est pourquoi je parlais du conteneur div, j'ai supposé qu'il s'agissait du texte au centre de la page ...
0
Réponse 7 / 7
s.spark Messages postés 2480 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 617
20 juin 2007 à 16:50
Salut,

Les tableaux sont déjà transparent par défaut.

PS : les div ne sert à rien, met diretement des id dans les td et table.
gryzzly je dirais même 95% :p
-1
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
21 juin 2007 à 15:25
faut pas abuser quand meme... ;-)
https://www.w3counter.com/globalstats.php?date=2007-05-30
0
s.spark Messages postés 2480 Date d'inscription vendredi 29 octobre 2004 Statut Contributeur Dernière intervention 13 février 2018 617 > gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020
21 juin 2007 à 15:36
Row :p

Je suis surpris que firefox est une aussi grosse par.
0
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920 > gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020
21 juin 2007 à 15:41
50,66 + 16,47 = 75% ?
(O_ô)'

 •→[]
0
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330 > Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016
21 juin 2007 à 22:10
oui.. parce que la c'est a l'echelle mondiale... et en france on est en retard sur les navigateurs alternatif :p

NA !
0
mikelangelo Messages postés 285 Date d'inscription vendredi 8 février 2008 Statut Membre Dernière intervention 18 juin 2016 86
Modifié par mikelangelo le 7/12/2011 à 23:27
va voir sa au cas ou :

https://lehollandaisvolant.net/errors/404.html#transparent

============================================== © mikelangelo ©

<droite>test</droite>
0

Discussions similaires

Effet transparence avec Paint.NET
Tino88 -
anonyme -

15 réponses
Transparence en tete et bas de page
Sabrina -
sabrina -

8 réponses
Superposé photo avec transparence
minime17 -
moiii -

12 réponses
problème de transparence à l'enregistrement..
le MamattH" -
Utilisateur anonyme -

7 réponses
Superposer 2 fichiers PDF
alexbarre -
morg -

6 réponses