Comment attribuer un fond transparent à un texte ou à une image à l'aide de CSS?
Est-il possible, en utilisant uniquement CSS, de rendre la background d'un élément semi-transparent tout en ayant le contenu (texte & images) de l'élément opaque?
J'aimerais accomplir cela sans avoir le texte et l'arrière-plan comme deux éléments séparés.
En essayant:
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>Il semble que les éléments enfants soient soumis à l'opacité de leurs parents, donc opacity:1 est relatif au opacity:0.6 du parent.
Utilisez une image semi-transparente PNG ou utilisez CSS3:
background-color:rgba(255,0,0,0.5);
Voici un article de css3.info, Opacité, RGBA et compromis (2007-06-03).
<p style="background-color:rgba(255,0,0,0.5);">
<span>Hello world</span>
</p>Dans Firefox 3 et Safari 3, vous pouvez utiliser RGBA comme Georg Schölly a mentionné .
Un truc peu connu est que vous pouvez également l'utiliser dans Internet Explorer à l'aide du filtre de dégradé.
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
Le premier nombre hexadécimal définit la valeur alpha de la couleur.
Solution complète tous les navigateurs:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For 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)";
}
Cela provient de transparence de l'arrière-plan CSS sans affecter les éléments enfants, par le biais de RGBa et de filtres.
Captures d'écran des résultats:
C'est en utilisant le code suivant:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
C’est la meilleure solution que je pourrais trouver, PAS d’utiliser CSS 3. Et cela fonctionne très bien sous Firefox, Chrome et Internet Explorer, autant que je sache.
Placez un conteneur DIV et deux DIV enfants au même niveau, un pour le contenu, un pour l'arrière-plan. Et en utilisant CSS, redimensionnez automatiquement l’arrière-plan en fonction du contenu et placez-le réellement à l’arrière à l’aide de z-index.
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}<div class="container">
<div class="content">
Here is the content.
<br/>Background should grow to fit.
</div>
<div class="background"></div>
</div>Pour une couleur de fond semi-transparente simple, les solutions ci-dessus (images CSS3 ou bg) sont les meilleures options. Cependant, si vous voulez faire quelque chose de plus sophistiqué (animation, plusieurs arrière-plans, etc.) ou si vous ne voulez pas vous fier à CSS3, vous pouvez essayer la "technique du volet":
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
La technique fonctionne en utilisant deux "couches" à l'intérieur de l'élément de volet extérieur:
- un (le "dos") qui correspond à la taille de l'élément de volet sans affecter le flux de contenu,
- et un (le "cont") qui contient le contenu et aide à déterminer la taille du volet.
Le volet position: relative on est important; il dit que la couche s'adapte à la taille de la fenêtre. (Si vous avez besoin que la balise <p> soit absolue, remplacez le volet <p> par <span> et enveloppez-le dans une balise <p> en position absolue.)
Le principal avantage de cette technique par rapport aux solutions similaires répertoriées ci-dessus est que le volet ne doit pas nécessairement avoir une taille spécifiée. comme indiqué ci-dessus, il s'adapte à la largeur totale (disposition normale des éléments de bloc) et à la hauteur du contenu. L’élément de volet extérieur peut être dimensionné à votre guise, à condition qu’il soit rectangulaire (c’est-à-dire que l’inline-block fonctionnera; l’inline-old inline ne fonctionnera pas).
En outre, cela vous laisse beaucoup de liberté pour l'arrière-plan; vous êtes libre de mettre vraiment n'importe quoi dans l'élément de fond et de ne pas en affecter le flux de contenu (si vous voulez plusieurs sous-couches de taille normale, assurez-vous qu'elles ont également la position: absolute, width/height: 100%, et haut/bas/gauche/droite: auto).
Une variante permettant l'ajustement des incrustations d'arrière-plan (via haut/bas/gauche/droite) et/ou le repérage d'arrière-plan (via la suppression d'une des paires gauche/droite ou haut/bas) consiste à utiliser le code CSS suivant:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Comme cela est écrit, cela fonctionne dans Firefox, Safari, Chrome, IE8 + et Opera, bien que IE7 et IE6 nécessitent des CSS et des expressions supplémentaires, IIRC, et la dernière fois que j'ai vérifié, la deuxième variante CSS ne fonctionne pas dans Opera.
Choses à surveiller:
- Les éléments flottants à l'intérieur du calque cont ne seront pas contenus. Vous devrez vous assurer qu'ils sont nettoyés ou autrement contenus, sinon ils glisseront du fond.
- Les marges vont sur l'élément du volet et le remplissage sur l'élément cont. N'utilisez pas l'inverse (marges sur le contenu ou remplissage dans le volet) ou vous découvrirez des particularités telles que la page étant toujours légèrement plus large que la fenêtre du navigateur.
- Comme mentionné, le tout doit être bloqué ou bloqué. N'hésitez pas à utiliser
<div>s au lieu de<span>s pour simplifier votre CSS.
Une démonstration plus complète, montrant la flexibilité de cette technique en l’utilisant en tandem avec display: inline-block, et avec à la fois auto et spécifique widths/min-heights:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>Et voici une démonstration en direct de la technique utilisée de manière intensive:
Il vaut mieux utiliser un .png semi-transparent.
Ouvrez simplement Photoshop , créez une image pixel 2x2 ( choisir 1x1 peut provoquer un bogue Internet Explorer! ), remplissez-le avec une couleur verte et définissez l'opacité dans "Onglet Couches". à 60%. Puis enregistrez-le et faites-en une image de fond:
<p style="background: url(green.png);">any text</p>
Cela fonctionne bien sûr, sauf dans la belle version Internet Explorer 6 . Il y a de meilleurs correctifs disponibles, mais voici un petit hack:
p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
Il y a une astuce pour minimiser le balisage: utilisez un pseudo-élément comme arrière-plan et vous pouvez lui régler l'opacité sans affecter l'élément principal et ses enfants. :
Sortie:
Code pertinent:
p {
position: relative;
}
p:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
opacity: .6;
z-index: -1;
}
/*** The following is just for demo styles ***/
body {
background: url('http://i.imgur.com/k8BtMvj.jpg') no-repeat;
background-size: cover;
}
p {
width: 50%;
padding: 1em;
margin: 10% auto;
font-family: arial, serif;
color: #000;
}
img {
display: block;
max-width: 90%;
margin: .6em auto;
}<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a ligula ut nunc dignissim molestie.
<img src="http://i.imgur.com/hPLqUtN.jpg" alt="" />
</p>Le support du navigateur est Internet Explorer 8 et ultérieur.
La méthode la plus simple consisterait à utiliser un fond d’image PNG semi-transparent .
Vous pouvez utiliser JavaScript pour le faire fonctionner dans Internet Explorer 6 si vous en avez besoin.
J'utilise la méthode décrite dans PNG transparents dans Internet Explorer 6.
Autre que ça,
vous pouvez le simuler en utilisant two side-by-side sibling elements - make un semi-transparent , puis absolutely position the other over the top?
Cette méthode vous permet d’avoir une image à l’arrière-plan et pas seulement une couleur unie. Vous pouvez également utiliser la transparence sur d’autres attributs tels que les bordures. Aucune image PNG transparente n'est requise.
Utilisez :before (ou :after) en CSS et donnez-leur la valeur d'opacité permettant de laisser l'élément à son opacité d'origine. Ainsi, vous pouvez utiliser: avant de créer un faux élément et lui donner le fond transparent (ou les bordures) que vous voulez et le déplacer derrière le contenu que vous voulez garder opaque avec z-index.
Un exemple ( violon ) (notez que la DIV avec la classe dad ne sert qu'à fournir un contexte et un contraste avec les couleurs, cet élément supplémentaire n'est en fait pas nécessaire, et Le rectangle rouge est déplacé un peu vers le bas et à droite pour laisser visible l’arrière-plan derrière l’élément fancyBg:
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
avec ce CSS:
.dad {
background: Lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
Dans ce cas, .fancyBg:before a les propriétés CSS que vous souhaitez définir avec la transparence (arrière-plan rouge dans cet exemple, mais il peut s'agir d'une image ou de bordures). Il est positionné comme absolu pour le déplacer derrière .fancyBg (utilisez des valeurs de zéro ou celles qui conviennent mieux à vos besoins).
Le problème est que le texte A réellement une opacité totale dans votre exemple. Elle a une opacité totale à l'intérieur de la balise p, mais la balise p est simplement semi-transparente.
Vous pouvez ajouter une image d'arrière-plan PNG semi-transparente au lieu de la réaliser en CSS, ou séparer le texte et le diviser en 2 éléments et déplacer le texte sur la zone (par exemple, la marge négative).
Sinon ce ne sera pas possible.
MODIFIER:
Tout comme Chris l'a mentionné: si vous utilisez un fichier PNG transparent, vous devez utiliser une solution de contournement JavaScript pour le faire fonctionner dans le fastidieux Internet Explorer ...
Presque toutes ces réponses supposent que le concepteur souhaite un fond de couleur unie. Si le concepteur souhaite réellement une photo comme arrière-plan, la seule solution réelle pour le moment est JavaScript, comme le plugin jQuery Transify mentionné ailleurs .
Ce que nous devons faire, c'est rejoindre la discussion du groupe de travail CSS et leur demander de nous attribuer un attribut background-opacity! Cela devrait aller de pair avec la fonctionnalité multi-arrière-plans.
Voici comment je fais cela (ce n'est peut-être pas optimal, mais ça marche):
Créez la div que vous voulez voir semi-transparente. Donnez-lui une classe/id. Laissez-le VIDE et fermez-le. Donnez-lui une hauteur et une largeur définies (par exemple, 300 pixels sur 300 pixels). Donnez-lui une opacité de 0,5 ou ce que vous voulez, et une couleur de fond.
Ensuite, DIRECTEMENT EN-DESSOUS de cette div, créez une autre div avec une classe/un identifiant différent. Créez un paragraphe à l'intérieur, où vous placerez votre texte. Donnez à la position div: relative et supérieure: -295px (NÉGATIF 295 pixels). Donnez-lui un indice z de 2 pour faire bonne mesure, et assurez-vous que l'opacité est 1. Modifiez votre paragraphe à votre guise, mais assurez-vous que les dimensions sont inférieures à celles de la première div afin qu'elle ne déborde pas. .
C'est ça. Voici le code:
.trans {
opacity: 0.5;
height: 300px;
width: 300px;
background-color: orange;
}
.trans2 {
opacity: 1;
position: relative;
top: -295px;
}
.trans2 p {
width: 295px;
color: black;
font-weight: bold;
}<body>
<div class="trans">
</div>
<div class="trans2">
<p>
text text text
</p>
</div>
</body>Cela fonctionne dans Safari 2.x, je ne connais pas Internet Explorer.
Voici un plugin jQuery qui gèrera tout pour vous, Transify (Transify - un plugin jQuery permettant d’appliquer facilement la transparence/opacité à l’arrière-plan d’un élément).
Je rencontrais ce problème de temps en temps, alors j'ai décidé d'écrire quelque chose qui rendrait la vie beaucoup plus facile. Le script fait moins de 2 Ko. Il ne nécessite qu'une ligne de code pour le faire fonctionner. Il gère également l'animation de l'opacité de l'arrière-plan, si vous le souhaitez.
Il y a quelque temps, j'ai écrit à ce sujet dans Transparence en arrière-plan avec plusieurs navigateurs (CSS) .
Bizarrement, Internet Explorer 6 vous permettra de rendre l'arrière-plan transparent et de garder le texte au dessus complètement opaque. Pour les autres navigateurs, je suggère ensuite d'utiliser un fichier PNG transparent.
Opacité de l'arrière-plan, mais pas du texte a quelques idées. Utilisez une image semi-transparente ou superposez un élément supplémentaire.
Si vous êtes un type Photoshop , vous pouvez également utiliser:
#some-element {
background-color: hsla(170, 50%, 45%, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Ou:
#some-element {
background-color: rgba(170, 190, 45, 0.9); // **0.9 is the opacity range from 0 - 1**
}
Afin de rendre l'arrière-plan d'un élément semi-transparent mais d'avoir le contenu (texte & images) de l'élément opaque. Vous devez écrire du code CSS pour cette image et ajouter un attribut appelé Opacity avec une valeur minimale. par exemple.
.image{
position: relative;
background-color: cyan;
opacity: 0.7;
}
// moins la valeur sera grande, plus la valeur sera faible.
couleur de fond: rgba (255,0,0,0,5); comme mentionné ci-dessus est la meilleure réponse tout simplement. Dire que l'utilisation de CSS3, même en 2013, n'est pas simple, car le niveau de support de différents navigateurs change à chaque itération.
Bien que background-color soit pris en charge par tous les principaux navigateurs (non nouveau pour CSS3) [1], la transparence alpha peut être délicate, en particulier avec Internet Explorer antérieur à la version 9 et avec la couleur de bordure sous Safari antérieure à la version 5.1. [2]
Utiliser quelque chose comme Compass ou SASS peut vraiment aider la production et la compatibilité entre plates-formes.
[1] W3Schools: Propriété CSS background-color
[2] Blog de Norman: Liste de contrôle de la prise en charge du navigateur CSS3 (octobre 2012)
CSS3 a une solution facile à votre problème. Utilisation:
background-color:rgba(0,255,0,0.5);
Ici, rgba signifie rouge, vert, bleu et alpha. La valeur verte est obtenue en raison de 255 et la demi-transparence est obtenue par 0,5 alpha.
Si vous utilisez Less , vous pouvez utiliser fade(color, 30%).
Vous pouvez utiliser le pur CSS : rgba(red, green, blue, alpha), où alpha est le niveau de transparence souhaité. JavaScript ou jQuery n'est pas nécessaire.
Voici un exemple:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
Vous pouvez résoudre ce problème pour Internet Explorer 8 en (ab) en utilisant la syntaxe du dégradé. Le format de couleur est ARGB. Si vous utilisez le préprocesseur Sass , vous pouvez convertir les couleurs à l'aide de la fonction intégrée "ie-hex-str ()".
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>
Vous pouvez utiliser RGBA(red, green, blue, alpha) dans CSS, quelque chose comme ceci:
Alors faites simplement quelque chose comme ça va marcher dans votre cas:
p {
position: absolute;
background-color: rgba(0, 255, 0, 0.6);
}
span {
color: white;
}
Il existe une solution plus simple pour superposer une image sur la même div. Ce n'est pas la bonne utilisation de cet outil. Mais fonctionne comme un charme pour faire cette superposition en utilisant CSS.
Utilisez une ombre incrustée comme ceci:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
C'est tout :)
Vous pouvez faire avec
rgba color codeen utilisant css comme dans l'exemple ci-dessous.
.imgbox img{
height:100px;
width:200px;
position:relative;
}
.overlay{
background:rgba(74, 19, 61, 0.4);
color:#fff;
text-shadow:0px 2px 5px #000079;
height:100px;
width:300px;
position:absolute;
top:10%;
left:25%;
padding:25px;
}<div class"imgbox">
<img src="http://www.bhmpics.com/wallpapers/little_pony_art-800x480.jpg">
<div class="overlay">
<p>This is Simple Text.</p>
</div>
</div>Selon mon point de vue, le meilleur moyen d’utiliser la couleur de fond avec une opacité si nous l’utilisons, nous ne perdrons donc pas l’opacité des autres éléments tels que la couleur de test et la bordure, etc.
background-color: rgba(71,158,0,0.8);
Utilise une couleur de fond opaque
couleur de fond: rgba (R, V, B, Opacité);
J'utilise normalement cette classe pour mon travail. C'est plutôt bon.
.transparent {
filter: alpha(opacity=50); /* internet Explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */
}