High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

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

Dernière réponse le 27 oct 2009 à 18:32:14 Sophie_26, le 29 aoû 2008 à 10:35:00 
 Signaler ce message aux modérateurs

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 ?

Configuration: Windows Vista
Firefox 3.0.1

Posez votre question Répondre

1

JuB0, le 29 aoû 2008 à 11:20:41

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

   
Répondre à JuB0

2

in2ni, le 29 aoû 2008 à 11:32:37
  • +1

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/...

   
Répondre à in2ni

3

Sophie_26, le 29 aoû 2008 à 11:48:30

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.

   
Répondre à Sophie_26

4

Sophie_26, le 29 aoû 2008 à 11:58:57

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 ?

   
Répondre à Sophie_26

5

Sophie_26, le 29 aoû 2008 à 14:33:03

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.

   
Répondre à Sophie_26

7

in2ni, le 29 aoû 2008 à 15:15:12

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épondre à in2ni

6

in2ni, le 29 aoû 2008 à 14:50:56

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 !

   
Répondre à in2ni

8

Sophie_26, le 29 aoû 2008 à 15:20:56

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

   
Répondre à Sophie_26

9

RAD ZONE, le 29 aoû 2008 à 16:16:57
  • +2

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
♣  La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣

   
Répondre à RAD ZONE

10

 klona, le 27 oct 2009 à 18:32:14

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

   
Répondre à klona
Posez votre question Répondre
Ils ont besoin de votre aide