[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 ?
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
- Fond de page word - Guide
- Trame de fond word - Guide
- Fond d'écran carousel - Forum Xiaomi
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 ?
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
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
