Comment donner au texte ou à une image un fond transparent en utilisant CSS?

est-il possible, en utilisant seulement CSS, de rendre le background d'un élément semi-transparent mais avoir le contenu (texte & images) de l'élément opaque?

j'aimerais faire cela sans avoir le texte et l'arrière-plan comme deux éléments distincts.

Lors de la tentative: 

p {
  position: absolute;
  background-color: green;
  filter: alpha(opacity=60);
  opacity: 0.6;
}

span {
  color: white;
  filter: alpha(opacity=100);
  opacity: 1;
}
html lang-html prettyprint-override"><p>
  <span>Hello world</span>
</p>

il semble que les éléments enfants sont soumis à l'opacité de leurs parents, donc opacity:1 est relatif au opacity:0.6 du parent.

2035
demandé sur Paul D. Waite 2009-04-30 13:00:02

27 réponses

soit utiliser une image semi-transparente PNG soit utiliser CSS3: 

background-color:rgba(255,0,0,0.5);

voici un article de css3.info, opacité, RGBA et compromis (2007-06-03).

2140
répondu Georg Schölly 2014-03-30 08:31:18

dans Firefox 3 et Safari 3, vous pouvez utiliser RGBA comme Georg Schölly mentionné .

une astuce peu connue est que vous pouvez l'utiliser dans Internet Explorer ainsi en utilisant le filtre gradient. 

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)";
}

c'est de CSS background transparence sans affecter les éléments enfants, par RGBa et filtres .

Screenshots preuve des résultats:

c'est lorsqu'on utilise 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>

Chrome-33 IE11 IE9 IE8

457
répondu Adrien Be 2017-05-23 11:54:59

C'est la meilleure solution que j'ai pu trouver, sans utiliser CSS 3. Et il fonctionne très bien sur Firefox, Chrome et Internet Explorer autant que je peux voir.

mettre un DIV conteneur et deux Div enfants dans le même niveau, un pour le contenu, un pour l'arrière-plan. Et en utilisant CSS, auto-size l'arrière-plan pour ajuster le contenu et mettre l'arrière-plan réellement dans le dos 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>
99
répondu Gorkem Pacaci 2015-03-30 20:45:51

il est préférable d'utiliser un semi-transparent .png .

Just open Photoshop , créer une 2x2 image de pixel ( picking 1x1 peut causer un bug Internet Explorer! ), le remplir d'une couleur verte et régler l'opacité dans" layers tab " à 60%. Puis enregistrez-le et faites - en une image de fond: 

<p style="background: url(green.png);">any text</p>

il fonctionne cool, bien sûr, sauf dans la belle Internet Explorer 6 . Il y a de meilleures corrections disponibles, mais voici un hack rapide: 

p {
    _filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
55
répondu Community 2017-05-23 12:10:41

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 fantaisiste (par exemple animation, décors multiples, etc.), ou si vous ne voulez pas vous appuyer sur CSS3, vous pouvez essayer la "technique de pane": 

.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 la vitre extérieure:

  • un (le "dos") qui s'adapte à la taille de l'élément de la vitre sans affecter le flux du contenu,
  • et un (Le" cont") qui contient le contenu et aide à déterminer la taille de la vitre.

le position: relative sur la vitre est important; il indique à la couche arrière de s'adapter à la taille de la vitre. (Si vous avez besoin que l'étiquette <p> soit absolue, changez la vitre d'une étiquette <p> en une étiquette <span> et enveloppez tout cela dans une étiquette <p> absolument en position.)

le principal avantage de cette technique par rapport aux autres techniques similaires énumérées ci-dessus est que le volet n'a pas à être d'une taille spécifiée; comme codé ci-dessus, il s'adaptera pleine largeur (disposition normale des blocs-éléments) et seulement aussi haut que le contenu. L'élément extérieur de la vitre peut être dimensionné de n'importe quelle façon, à condition qu'il soit rectangulaire (c'est-à-dire que le bloc en ligne fonctionnera; le bloc en ligne simple ne fonctionnera pas).

Aussi, il vous donne beaucoup de liberté pour l'arrière-plan; vous êtes libre de mettre vraiment tout ce qui est dans l'élément de dos et qui n'affecte pas le flux du contenu (si vous voulez plusieurs sous-couches grandeur nature, assurez-vous qu'elles ont aussi la position: absolu, Largeur/Hauteur: 100%, et Haut/Bas/Gauche/Droite: auto).

une variante pour permettre le réglage de l'inset de fond (via Haut/Bas/Gauche/Droite) et / ou l'épinglage de fond (via la suppression d'une des paires gauche / droite ou Haut / Bas) est d'utiliser le CSS suivant à la place: 

.pane > .back {
    position: absolute;
    width: auto; height: auto;
    top: 0px; bottom: 0px; left: 0px; right: 0px;
}

As écrit, cela fonctionne dans Firefox, Safari, Chrome, IE8+, et Opera, bien que IE7 et IE6 exigent CSS et expressions supplémentaires, IIRC, et la dernière fois que j'ai vérifié, la deuxième variation CSS ne fonctionne pas dans Opera.

choses à surveiller:

  • les éléments flottants à l'intérieur de la couche cont ne seront pas contenus. Vous devez vous assurer qu'ils sont dégagés ou autrement contenus, ou ils vont glisser hors du fond.
  • Les marges vont sur l'élément de la vitre et le rembourrage va sur l'élément cont. N'utilisez pas l'inverse (marges sur le cont ou rembourrage sur la vitre) ou vous découvrirez des bizarreries telles que la page étant toujours légèrement plus large que la fenêtre du navigateur.
  • comme mentionné, le tout doit être bloc ou en ligne-bloc. N'hésitez pas à utiliser <div> s au lieu de <span> s pour simplifier votre CSS.

une démo plus complète, démontrer la flexibilité de cette technique en l'utilisant en tandem avec display: inline-block , et à la fois auto et "spécifique width s / min-height 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 une live demo de la technique largement utilisée:

christmas-card-2009.slippyd.com screenshot

55
répondu Slipp D. Thompson 2018-09-13 10:54:40

il y a une astuce pour minimiser le balisage: utilisez un pseudo élément comme l'arrière-plan et vous pouvez régler l'opacité à elle sans affecter l'élément principal et ses enfants:

DÉMO

sortie:

Background opacity with a pseudo element

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 soutien de navigateur est Internet Explorer 8 et plus tard.

49
répondu web-tiki 2016-04-11 18:59:43

la méthode La plus simple serait d'utiliser un fond semi-transparent image PNG .

vous pouvez utiliser JavaScript pour la faire fonctionner dans Internet Explorer 6 si vous avez besoin.

j'ai utiliser la méthode décrite dans de Transparence des Png dans Internet Explorer 6 .

autre que celui-ci,

vous pouvez faire semblant en utilisant two side-by-side sibling elements - faire un semi-transparent , puis absolutely position the other over the top ?

23
répondu Chris 2014-10-05 07:23:59

Cette méthode vous permet d'avoir une image en arrière-plan et pas seulement une couleur unie, et peut être utilisé pour avoir de 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é pour laisser l'élément à son opacité initiale. Ainsi, vous pouvez utiliser :avant de faire un faux élément et de lui donner le fond transparent (ou les frontières) que vous voulez et le déplacer derrière le contenu vous voulez garder opaque avec z-index .

un exemple ( violon ) (notez que le DIV avec la classe dad est juste pour 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 plus 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 cette 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 possède les propriétés CSS que vous voulez avoir avec transparence (fond rouge dans cet exemple, mais peut être une image ou des bordures). Il est positionné comme absolu pour le déplacer derrière .fancyBg (utilisez des valeurs de zéro ou n'importe quoi qui est plus approprié pour vos besoins).

20
répondu frozenkoi 2016-02-06 11:17:21

presque toutes ces réponses supposent que le concepteur veut un fond de couleur solide. Si le concepteur veut réellement une photo comme arrière-plan, la seule vraie solution pour le moment est JavaScript comme le plugin jQuery Transify mentionné ailleurs .

ce que nous devons faire, c'est nous joindre à la discussion du groupe de travail CSS et leur demander de nous donner un attribut background-opacity! Cela devrait fonctionner en même temps que la fonctionnalité multi-backgrounds.

15
répondu thinsoldier 2017-05-23 12:26:38

le problème est, que le texte a réellement la pleine opacité dans votre exemple. Il a la pleine opacité à l'intérieur de la balise p , mais la balise p est juste semi-transparente.

vous pouvez ajouter une image de fond PNG semi-transparente au lieu de la réaliser dans CSS, ou séparer le texte et div dans 2 éléments et déplacer le texte au-dessus de la boîte (par exemple, marge négative).

sinon ce ne sera pas possible.

EDIT:

comme Chris l'a mentionné: si vous utilisez un fichier PNG avec transparence, vous devez utiliser une solution de contournement JavaScript pour le faire fonctionner dans le fâcheux Internet Explorer...

14
répondu SvenFinke 2011-05-25 11:14:45

Voici comment je le fais (il pourrait ne pas être optimale, mais il fonctionne):

créer le div que vous voulez être semi-transparent. Donner une classe/id. Laissez VIDE, et le fermer. Donnez-lui une hauteur et une largeur prédéfinies (disons, 300 pixels par 300 pixels). Donner une opacité de 0,5 ou ce que vous voulez, et une couleur d'arrière-plan.

ensuite, directement au-dessous de cette div, créer une autre div avec une classe/id différente. Créer un paragraphe à l'intérieur, où vous aurez placez votre texte. Donnez la position div : relative, et en haut: -295px (C'est négatif 295 pixels). Donnez-lui un indice z de 2 pour une bonne mesure, et assurez-vous que son opacité est de 1. Style votre paragraphe comme vous le souhaitez, mais assurez-vous que les dimensions sont moins que celle de la première div afin qu'il 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 n'ai pas en savoir plus sur Internet Explorer.

13
répondu 5 revs, 5 users 57%paris ionescu 2015-03-30 19:04:39

voici un plugin jQuery qui va gérer tout pour vous, Transify ( Transify - un plugin jQuery pour appliquer facilement transparence / opacité sur le fond d'un élément ).

je rencontrais ce problème de temps en temps, donc j'ai décidé d'écrire quelque chose qui rendrait la vie beaucoup plus facile. Le script est de moins de 2 KO et il ne nécessite qu'une ligne de code pour le faire fonctionner, et il gérera aussi l'animation l'opacité de l'arrière-plan si vous le souhaitez.

12
répondu joren 2011-05-25 11:28:36

opacité du fond, mais pas le texte a quelques idées. Soit utiliser une image semi-transparente, soit superposer un élément supplémentaire.

10
répondu fearoffours 2017-05-23 10:31:36

il y a quelque temps, j'ai écrit à ce sujet dans Cross Browser Background Transparency With CSS .

étrangement Internet Explorer 6 vous permettra de rendre le fond transparent et garder le texte sur le dessus complètement opaque. Pour les autres navigateurs, je suggère alors d'utiliser un fichier PNG transparent.

10
répondu philnash 2011-05-25 11:17:40

si vous êtes un Photoshop guy, 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**
}
9
répondu suraj rawat 2016-04-11 18:55:46

background-color:rgba(255,0,0,0.5); comme mentionné ci-dessus est la meilleure réponse tout simplement. Utiliser CSS3, même en 2013, n'est pas simple car le niveau de support des différents navigateurs change à chaque itération.

alors que background-color est 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 avant la version 9 et avec border color sur Safari avant la version 5.1. [2]

en utilisant quelque chose comme Compass ou SASS peut vraiment aider la production et la compatibilité de plate-forme.

[1] W3Schools: CSS background-color propriété

[2] Norman's Blog: Browser Support Checklist CSS3 (octobre 2012)

7
répondu DragonBear 2013-01-08 20:00:39

CSS3 a une solution facile de votre problème. Use: 

background-color:rgba(0,255,0,0.5);

ici, rgba signifie rouge, vert, bleu et valeur alpha. La valeur verte est obtenue à cause de 255 et la moitié de la transparence est obtenue par 0,5 valeur alpha.

7
répondu Touhid Rahman 2013-05-20 23:36:50

pour rendre l'arrière-plan d'un élément semi-transparent mais avoir le contenu (texte & images) de l'élément opaque. Vous devez écrire le code css pour cette image et vous devez ajouter un attribut appelé opacity avec une valeur minimale. par exemple 

.image{
   position: relative;
   background-color: cyan;
  opacity: 0.7;
}

/ / moindre la valeur plus sera la transparence, ou la valeur moins sera la transparence.

7
répondu Pushp Singh 2016-06-03 12:09:42

si vous utilisez moins , vous pouvez utiliser fade(color, 30%) .

6
répondu alex 2016-04-11 19:01:24

vous pouvez résoudre cela pour Internet Explorer 8 par (ab)en utilisant la syntaxe de gradient. Le format couleur est ARGB. Si vous utilisez le préprocesseur Sass vous pouvez convertir les couleurs en utilisant 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')";
4
répondu Henrik 2016-04-11 18:54:35

vous pouvez utiliser pur CSS 3 : rgba(red, green, blue, alpha) , où alpha est le niveau de transparence que vous voulez. Il n'y a pas besoin de JavaScript ou jQuery.

voici un exemple: 

#item-you-want-to-style{
    background:rgba(192.233, 33, 0.5)
}
4
répondu Peter Mortensen 2016-04-11 18:57:20 
<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>

http://jsfiddle.net/x2ukko7u / ?

3
répondu premgowda 2014-11-18 11:05:59

il y a 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 insérée comme ceci: 

box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);

C'est tout :)

1
répondu edd2110 2016-04-11 19:00:31

vous pouvez utiliser RGBA (red, green, blue, alpha) dans le CSS , quelque chose comme ceci:

alors simplement faire quelque chose comme ça va fonctionner dans votre cas: 

p {
  position: absolute;
  background-color: rgba(0, 255, 0, 0.6);
}

span {
  color: white;
}
1
répondu Alireza 2017-10-20 02:41:59

j'utilise normalement cette classe pour mon travail. Son assez 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 */
}
0
répondu Cengkuru Michael 2017-02-11 08:00:03

vous pouvez faire avec rgba color code en utilisant css comme cet exemple donné 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>
0
répondu Rudra 2018-05-22 06:10:43

vous pouvez utiliser la couleur RGB avec l'opacité comme ce code de couleur en RGB (63,245,0) et ajouter l'opacité comme (63,245,0,0.5) et aussi ajouter RGBA remplacer RGB. Une utilisation pour opacité 

div{
  background:rgba(63,245,0,0.5);
  }
-2
répondu Vijay Sharma 2016-12-29 09:40:00