[html] fond: peut-on varier l'opacité ?
Résolu/Fermé
A voir également:
- [html] fond: peut-on varier l'opacité ?
- Editeur html - Télécharger - HTML
- Comment mettre une vidéo en fond d'écran - Guide
- Trame de fond word - Guide
- Espace en html - Astuces et Solutions
- Espace html ✓ - Forum HTML
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/
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 ?
<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 ?
JuB0
Messages postés
654
Date d'inscription
jeudi 27 décembre 2007
Statut
Membre
Dernière intervention
6 mai 2012
81
29 août 2008 à 11:20
29 août 2008 à 11:20
Tu souhaiterais rendre ton fond "transparent" ?
Dans ce cas on verrait quoi dèrriere ? le fond du fond ?
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.
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>
<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 !
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
<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
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
29 août 2008 à 16:16
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
HTML
RAD
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
