Comment attribuer un fond transparent à un texte ou à une image à l'aide de CSS?
https://stackoverflow.com/questions/806000
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Est-il possible, en utilisant uniquement CSS, de rendre le background élément transparent mais d'avoir le contenu (texte & et images) de l'élément opaque?
J'aimerais accomplir cela sans que le texte et l'arrière-plan ne soient deux éléments distincts.
Lorsque vous essayez:
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. opacity:1 est donc relatif au opacity:0.6 du parent.
La solution
Utilisez une image PNG semi-transparente ou utilisez CSS3:
background-color:rgba(255,0,0,0.5);
Voici un article tiré 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>
Autres conseils
Dans Firefox 3 et Safari 3, vous pouvez utiliser RGBA comme suit: Georg Sch & # 246; récemment mentionné .
Un truc peu connu est que vous pouvez l'utiliser dans Internet & nbsp; Explorer également à 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)";
}
Ceci provient de Transparence de l'arrière-plan CSS sans affecter les éléments enfants, par le biais de la RGBa et des filtres .
preuve des résultats des captures d'écran:
C’est lorsque vous utilisez 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 puisse trouver, mais pas d’utilisation de CSS 3. Et cela fonctionne très bien sous Firefox, Chrome et Internet Explorer, à ma connaissance.
Placez un conteneur DIV et deux DIV enfants au même niveau, un pour le contenu et un pour l'arrière-plan. Et en utilisant CSS, redimensionnez l’arrière-plan en fonction du contenu et placez-le réellement à l’arrière en utilisant 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. Toutefois, si vous souhaitez utiliser une méthode plus sophistiquée (animation, arrière-plans multiples, etc.) ou si vous ne souhaitez pas vous fier à CSS3, vous pouvez utiliser la technique du volet & # 8220; & # 8221; :
.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 & # 8220; couches & # 8221; à l'intérieur de l'élément de volet extérieur:
- un (le & # 8220; retour & # 8221;) qui correspond à la taille de l'élément de volet sans affecter le flux de contenu,
- et un (& # 8220; cont & # 8221;) qui contient le contenu et aide à déterminer la taille du volet.
Le volet position: relative 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 <span> par un <div> et encapsulez le tout dans une balise display: inline-block à position absolue).
L'avantage principal 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 (par exemple, inline-block fonctionnera; tout simplement inline inline ne fonctionnera pas).
En outre, cela vous laisse beaucoup de liberté pour l’arrière-plan; vous êtes libre de vraiment mettre quoi que ce soit dans l'élément arrière sans que cela affecte le flux de contenu (si vous voulez plusieurs sous-calques de taille normale, assurez-vous qu'ils ont également la position: absolute, width / height: 100%, et haut / bas / gauche / droite: auto).
Une variante permettant le réglage de l’arrière-plan (via haut / bas / gauche / droite) et / ou l’identification de l’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 indiqué, 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.
À 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 confinés, sinon ils glisseront du fond.
- Les marges vont sur l'élément de volet et le remplissage sur l'élément cont. N'utilisez pas l'inverse (marges dans la fenêtre de navigation) ou vous découvrirez des bizarreries telles que la page 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
autos au lieu dewidths pour simplifier vos CSS.
Une démo plus complète, montrant la flexibilité de cette technique en l’utilisant en tandem avec min-height, et avec les deux <=> & amp; spécifique <=> s / <=> s:
.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 un démonstration en direct de la technique largement utilisée:
Il est préférable d'utiliser un .png semi-transparent.
Il suffit d'ouvrir Photoshop , créer une image pixel 2x2 (< a href = "https://stackoverflow.com/questions/7764751/ie8-shows-gradient-instead-of-background-image/7765128#7765128"> choisir 1x1 peut provoquer un Internet & nbsp; Explorer bug! ), remplissez-le de couleur verte et définissez l'opacité dans l'onglet "Couches". à 60%. Puis enregistrez-le et faites-en une image d'arrière-plan:
<p style="background: url(green.png);">any text</p>
Cela fonctionne bien sûr, sauf dans la jolie Internet & nbsp; Explorer & nbsp; 6 . Il existe de meilleures solutions 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 existe une astuce pour minimiser le balisage: utilisez un pseudo-élément comme arrière-plan et définissez l'opacité sur celui-ci 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 & nbsp; Explorer & nbsp; 8 et ultérieur.
La méthode la plus simple consiste à utiliser un image PNG à l'arrière-plan 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 cela,
vous pouvez le simuler en utilisant deux éléments frères côte à côte - créez un élément semi-transparent , puis placez absolument l'autre au-dessus ?
Cette méthode vous permet d’avoir une image à l’arrière-plan et pas seulement une couleur unie. Vous pouvez aussi utiliser la transparence sur d’autres attributs tels que les bordures. Aucune image PNG transparente n'est requise.
Utilisez : before (ou : after ) dans 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 l’arrière-plan transparent (ou les bordures) de votre choix et le déplacer derrière le contenu que vous souhaitez conserver opaque avec z-index .
Un exemple ( fiddle ) (notez que le 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 la droite pour laisser visible l'arrière-plan derrière le code < > é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 contient les propriétés CSS que vous souhaitez définir avec la transparence (l'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 ce qui convient le mieux à vos besoins).
Le problème est que le texte A réellement une opacité totale dans votre exemple. La balise p est totalement opaque, 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, cela ne sera pas possible.
EDIT:
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 le div que vous souhaitez rendre semi-transparent. 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-en une autre avec une classe / un identifiant différent. Créez un paragraphe à l'intérieur, où vous placerez votre texte. Indiquez 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 son opacité est 1. Créez le style de votre paragraphe comme vous le souhaitez, mais assurez-vous que les dimensions sont inférieures à celles du premier div . ne pas déborder.
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 est inférieur à 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.
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.
Il y a quelque temps, j'ai écrit à ce sujet dans Transparence de l'arrière-plan multi-navigateurs avec CSS .
Bizarrement, Internet Explorer 6 vous permettra de rendre l’arrière-plan transparent et de conserver le texte au dessus complètement opaque. Pour les autres navigateurs, je suggère alors d’utiliser un fichier PNG transparent.
Si vous êtes un 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 tout en ayant le contenu (texte et 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 élevée, plus la transparence sera faible, moins la valeur sera transparente.
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 divers navigateurs change à chaque itération.
Bien que background-color soit pris en charge par tous les principaux navigateurs (pas 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 sur Safari. avant la version 5.1. [2]
Utilisation de 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 pour l'assistance du navigateur CSS3 (octobre 2012)
CSS3 a une solution simple à votre problème. Utilisez:
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 avec une valeur alpha de 0,5.
Si vous utilisez Less , vous pouvez utiliser fade (couleur, 30%) .
Vous pouvez résoudre ce problème pour Internet & nbsp; Explorer & nbsp; 8 de (ab) à l'aide de la syntaxe en 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')";
Vous pouvez utiliser des pures: rgba (rouge, vert) , bleu, alpha) , où alpha correspond au niveau de transparence souhaité. JavaScript ou jQuery ne sont pas nécessaires.
Voici un exemple:
#item-you-want-to-style{
background:rgba(192.233, 33, 0.5)
}
<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>
Il existe une solution plus simple pour superposer une image sur le 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 utiliser RGBA (rouge, vert, bleu, alpha) dans le CSS , à peu près 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;
}
Vous pouvez utiliser
code de couleur rgbaen 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>
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 */
}
Selon mon point de vue, le meilleur moyen d'utiliser la couleur de fond avec une opacité si nous l'utilisons, nous ne perdrons 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);
Utiliser la couleur de fond avec l'opacité
couleur de fond: rgba (R, V, B, Opacité);
Vous pouvez utiliser une couleur RVB avec une opacité semblable à celle du code de couleur RVB (63 245,00), une opacité semblable à (63 245,0,0,5) et une addition RGBA qui remplace RVB. Une utilisation pour l'opacité
div{
background:rgba(63,245,0,0.5);
}
