Quel plaisir de vous parler de transparence CSS, à toutes fins pratiques inexistante avant le CSS2, à quelques exceptions près. En utilisant la transparence du format GIF, une image indexée (et pixelisé!) où par exemple un pixel sur deux était vide, laissant entrevoir l’image d’en dessous. Un résultat plus ou moins probant en ce qui me concerne. Un autre technique enseigné à l’époque avec un GIF découpée consistait cette fois à ajouter un légé rappelle du fond sur l’image, quelques pixels en guise de pourtour. Il y avait aussi la gamme des filtres Internet Explorer 4! à l’origine de la mauvaise réputation du navigateur de Microsoft.
Outre le format d’image PNG et son support de « l’alpha channel » il y a depuis 3 méthodes pour jouer avec la transparence en CSS :
Histoire
/* IE 4.0 */ filter:progid:DXImageTransform.Microsoft.Alpha /* IE 8 - 9 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 5.5 - 7 */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 8*/ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";} /* Et finalement, plus simple et compatible */ /* ... IE 8, 9, 5, 6, 7! */ filter: alpha(opacity=50); Ou encore les transitions : filter:progid:DXImageTransform.Microsoft.Fade()
Bueark! « DXImageTransform ». En plus IE en arrachait, des difficultés au niveau de l’anti-alias et du texte qui en décourageait plus d’un. On y arrivait tout de même. Une autre bonne raison de passer à j’uery, à l’époque. Car n’empêche, Microsoft est en quelque sortes précurseures d’une technique aujourd’hui entièrement intégrées au CSS3! La bête noire du design n’a aujourd’hui plus de limite. Déjà Microsoft a simplifié son filtre par filter: alpha(opacity: 40); comme si la transparence avant plus d’un format! Enfin, déjà disponible avec le CSS2 et en plus simple opacity: 0.40 pour les navigateurs dit moderne. On parle essentiellement d’un élément transparent, c’est-à-dire que l’ensemble du contenu de l’élément sera transparent. Le texte, comme la couleur de fond. On s’en sert d’ailleurs pour cacher carrément un élément 0 ou 1. Note : Pour supporter les vieilles versions Ie, on force un zoom: 1 ou un width: 100%;.
Attribut « opacity »
.transparance { background:transparent; -moz-opacity:0.40; /* Mozilla, vieux Firefox 0.9- Netscape ... */ -khtml-opacity: 0.5; /* Safari 1.x */ filter:alpha(opacity: 40); /* IE 5, 6, 7, 8, 9! */ opacity:0.40; zoom: 1; }
Exemple simple de la W3C avec une image réactive et le sélecteur hover.
img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }
Fond transparent et non le texte
Et donc pour avoir un texte à 100% sur un fond transparent à 50% il fallait deux DIV. Un pour le fond, un pour le texte! Exemple :
<html>
<head>
<style>
div.cFond {
background: #58585a url("http://neural.quebec/p_hiver5.jpg");
padding:20px;
}
div.cTexte {
background-color: #ffffff;
padding:20px;
width:200px
height:100px;
opacity: 0.6;
filter: alpha(opacity=60);
zoom: 1;
}
div.cTexte p {
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="cFond">
<div class="cTexte">
<p>Texte...</p>
</div>
</div>
</body>
</html>
Résultat à 20%
Déclaration universelle des droits de l’homme
Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde.
Bon exemple
Le secret est d’avoir un DIV avec une position « absolute » sous le contenu avec un z0index supérieur au fond mais inférieur au texte.
<style>
.cTexteConteneur {
position:relative;
background: #58585a url("http://neural.quebec/p_hiver5.jpg");
height:140px;
}
.cTexte2 {
position:relative;
z-index:5;
}
.cTexte2 h5 {
padding-top:40px;
margin-left:20px;
}
.cTexte2 p {
margin-left:20px;
}
.cFondTransparent {
position:absolute;
top:20px;
left:20px;
bottom:20px;
right:20px;
background-color:#ffffff;
z-index:3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity:.2;
/* Petit truc pour ;a hauteur et la position:absolute; */
overflow:show;
}
</style>
<div class="cTexteConteneur">
<div class="cTexte2">
<p>Texte</p><br />
</div>
<div class="cFondTransparent"></div>
</div>
Résultat à 20% et texte à 100%
Déclaration universelle des droits de l’homme
Considérant que la reconnaissance de la dignité inhérente à tous les membres de la famille humaine et de leurs droits égaux et inaliénables constitue le fondement de la liberté, de la justice et de la paix dans le monde.
La transparence a aussi d’autres aspects, utilisés ici en transition.
.transition { opacity:0; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; }
Couleurs et transparence RGBs
Mais rien ne bat le support RGBa du CSS3! Évidemment en RGB (voir le Convertisseur Hexadécimal (HEX) / Décimal (RGB)). On parle ici d’une véritable couleur de fond, rien à voit avec l’opacité. Une fois notre couleur en RGB, les trois premiers nombres, il suffit de jouer avec le dernier nombre, de 0.01 à 1.00. Ici un noir à 50 % par exemple : rgba(0, 0, 0, 0.5);
/* Safari 3.x Mozilla Firefox 3.x Google Chrome (toutes les version) Mobile Safari (iPhone / iPod / iPad) Opera 10.x Internet Explorer 9 Preview */ .transparance { background: rgb(0, 0, 0); /* Pour navigateur incompatible */ background: rgba(0, 0, 0, 0.5); } /*Pour les vieux IE */ .transparanceIE { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50990000,endColorstr=#50990000); zoom: 1; }
Graphique vectoriel adaptable (SVG)
Le Graphique vectoriel adaptable (SVG) permets aussi de manipuler la transparence avec l’attribut fill-opacity. Plus qu’une image, la programmation SVG permet de créer des fonds dynamiques en quelques lignes de code.
<svg height="100" width="100"> <ellipse cx="95" cy="61" rx="60" ry="30" fill="#666" fill="#c6c3bd" fill-opacity="0.5" /> </svg>
![[Photo]](https://www.trucsweb.com/documents/images/2024/js-bs-formulaire-fetch.png)
Formulaire Bootstrap 5 Ajax avec validation.![[Photo]](https://www.trucsweb.com/documents/images/2023/elephants-Salvador_Dali_1948.jpg)
Sécuriser l’accès « bureau à distance » sous IIS![[Photo]](https://www.trucsweb.com/documents/images/2023/trou_noir_galaxie_M87.jpg)
L’AI au temps du Far-Web![[Photo]](https://www.trucsweb.com/documents/images/2023/gilles-villeneuve-montreal1978.jpg)
Sélecteurs JavaScript querySelector() et querySelectorAll()![[Photo]](http://www.trucsweb.com/documents/images/2023/evolution_de_lhomme.jpg)
CSS - Animations![[Photo]](http://www.trucsweb.com/documents/images/2023/univers-copernic.jpg)
Mode de couleurs (Color modes) Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/2023/les_burgers_de_papa.jpg)
25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5![[Photo]](http://www.trucsweb.com/documents/images/logos/l_whatwg.svg)
Living Standard pour HTML de Apple, Google, Mozilla, Microsoft ...et la W3C![[Photo]](http://www.trucsweb.com/documents/images/2022/tim-berners-lee-web-b.jpg)
Le nouveau HTML « Living Standard » et le XML![[Photo]](http://www.trucsweb.com/documents/images/2022/v_jacques_dutronc-les_cactus.jpg)
Sécuriser un formulaire de contact au Far-Web!
AbuseIPDB
Connexion