[html] fond: peut-on varier l'opacité ? [Résolu]

Sophie_26 - Dernière réponse le 27 oct. 2009 à 18:32

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 ?

[html] fond: peut-on varier l'opacité »

Suggestions

[html] fond: peut-on varier l'opacité ?
[html] fond ecran (Résolu) » Forum
[PHP] Couleur de fond » Forum
Fond ecran fixe en html (Résolu) » Forum
Background transparent ? (Résolu) » Forum
Background fixe en html (Résolu) » Forum

Plus

Réponse

RAD ZONE 4790Messages postés 20 janvier 2007Date d'inscription 23 mai 2012Dernière intervention 29 août 2008 à 16:16

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

Ajouter un commentaire - Site web

Réponse

in2ni 29 août 2008 à 11:32

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://www.babylon-design.com/...

Ajouter un commentaire

Réponse

JuB0 650Messages postés 27 décembre 2007Date d'inscription 6 mai 2012Dernière intervention 29 août 2008 à 11:20

Tu souhaiterais rendre ton fond "transparent" ?
Dans ce cas on verrait quoi dèrriere ? le fond du fond ?

Ajouter un commentaire

Réponse

Sophie_26 29 août 2008 à 11:48

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.

Ajouter un commentaire

Réponse

Sophie_26 29 août 2008 à 11:58

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 ?

Ajouter un commentaire

Réponse

Sophie_26 29 août 2008 à 14:33

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.

Ajouter un commentaire

in2ni - 29 août 2008 à 15:15

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>

Réponse

in2ni 29 août 2008 à 14:50

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 !

Ajouter un commentaire

Réponse

Sophie_26 29 août 2008 à 15:20

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

Ajouter un commentaire

Réponse

klona 27 oct. 2009 à 18:32

Merci à tous pour ce thread qui m'a fourni la solution à mon probleme de transparence !

Ajouter un commentaire

Répondre au sujet

Posez votre question

Dossier à la une

Passage au tout numérique : quel coût pour les particuliers ?

Passage au tout numérique : quel coût pour les particuliers ?

Combien cela coûte-t-il au total ? Quelles aides apportent l'état et les acteurs du marché pour alléger cette charge non choisie ? Tous les détails sur Commentçamarche.net.

[html] fond: peut-on varier l'opacité ? [Résolu]

[html] fond: peut-on varier l'opacité »

Passage au tout numérique : quel coût pour les particuliers ?