[html] fond: peut-on varier l'opacité ?
Résolu
Sophie_26
-
klona -
klona -
Bonjour,
je suis sur un site où on a un espace où faire un peu de html basique. J'aurais voulu savoir si on avait la possibilité de jouer sur l'opacité d'un fond pour le rendre plus ou moins transparent ?
voici le style de codes qu'on utilise:
<table width="100%" bgcolor="#339933" border="1">
<tbody>
<tr>
<td>
BLABLABLA
</td>
</tr>
</tbody>
</table>
avec ça peut-on faire quelque chose ?
je suis sur un site où on a un espace où faire un peu de html basique. J'aurais voulu savoir si on avait la possibilité de jouer sur l'opacité d'un fond pour le rendre plus ou moins transparent ?
voici le style de codes qu'on utilise:
<table width="100%" bgcolor="#339933" border="1">
<tbody>
<tr>
<td>
BLABLABLA
</td>
</tr>
</tbody>
</table>
avec ça peut-on faire quelque chose ?
Configuration: Windows Vista Firefox 3.0.1
9 réponses
-
Pour jouer sur l'opacité, il faut utiliser des propriétés de style.
Il y a plusieurs façon. Ici, par exemple, on crée une classe de style (dans une balise <style> de la section <head>) nommée classe_semi_transparente et on inclut votre code dans une balise <div class="classe_semi_transparente"> de la section <body>. Pour faire varier l'opacité automatiquement, il faudra utiliser javascript qui agira sur ses propriétés.
<html>
<head>
<style>
.classe_semi_transparente {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="classe_semi_transparente">
<table width="100%" bgcolor="#339933" border="1">
<tbody>
<tr>
<td>
BLABLABLA
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Voir : http://babylon-design.com/transparence-opacity-images-navigateurs/ -
en faisant comme tu dis ça marche pas, body et style sont bloquées sur le site. mais en faisant ça:
<div style="filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ">
<table width="100%" bgcolor="#339933" border="1">
<tbody>
<tr>
<td>
BLABLABLA
</td>
</tr>
</tbody>
</table>
</div>
c'est plus direct et ça marche. ça me simplifie en <div style="opacity: 0.5; ">, mais ça marche.
maintenant, je suis embêtante, mon problème c'est que tout est plus transparent... le contenu du fond aussi, et c'est peu gênant... comment l'appliquer uniquement au fond lui même ? -
Tu souhaiterais rendre ton fond "transparent" ?
Dans ce cas on verrait quoi dèrriere ? le fond du fond ? -
oula ok... seulement mon problème c'est qu'on est assez, voir très, limité... et on peut pas utiliser les classes et les trucs comme ça...
je vais voir le lien. -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
on peut pas de rendre que le fond transparent et pas son contenu ? j'ai essayé plein de combinaison à partir de ce code là.. mais je trouve rien.
-
Et ce code ?
<div style="filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ">
<table width="100%" bgcolor="#339933" border="1">
<tbody>
<tr>
<td style="filter:alpha(opacity=100); -moz-opacity:1.0; -khtml-opacity: 1.0; opacity: 1.0;">
BLABLABLA
</td>
</tr>
</tbody>
</table>
</div>
-
-
Voir le lien suivant, jusqu'au bout de la discussion, ne t'arrête pas à l'idée des png (ou gif) transparents, mais c'est une idée :
http://www.allhtml.com/forums/posts_list/topic:496499
Malheureusement je n'aui pas le temps là d'explorer ton problème à fond, désolé, mais ça m'intértesse ! -
oui je vois le principe, faire ça:
<div style="opacity: 0.7;">
<table width="100%" bgcolor="#339933" border="1">
<tbody>
<tr>
<td>
<div style="opacity: 2;">
BLABLABLA
</div>
</td>
</tr>
</tbody>
</table>
</div>
mais rien à faire... le contenu prend la transparence du fond... bah sinon tant pis -
SALUT
le contenu prend la transparence du fond
c est parce que tu met le texte sur la div qui subie la transparence ( comme l image dans l exemple que je donne en dessous )
Vas voir l exemplevarier_opacite sur un de mes sites Aide ccm
et voila les code pour le faire
CSS<style type="text/css"> /*<![CDATA[*/ body { background-color: #333; } #container { position: absolute; top: 100px; left: 400px; } #transparence { width: 350px; height: 200px; background-image: url(1.jpg); background-color: #ffffff; filter: alpha(opacity=30); -moz-opacity: 0.3; opacity: 0.3; } #texteopaque { width: 250px; height: 100px; background-color: transparent; position: absolute; color:#ffffff; z-index: 2; } img.c1 {width: 128px; height: 128px; } /*]]>*/ </style>
HTML<body> <div id="container"> <div id="texteopaque">TEXTE OPAQUE SUR DIV AVEC TRANSPARENCE </div> <div id="transparence"> <img class="c1" alt="img" src="1.png" /> </div> </div> </body>
RAD -
