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


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

Je voudrais accomplir ceci 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>

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


1997
2018-04-30 09:00


origine


Réponses:


Utilisez un semi-transparent PNG image ou utilisez CSS3:

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

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


2115
2017-07-13 20:51



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 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 la part de Transparence de l'arrière-plan CSS sans affecter les éléments enfants, via RGBa et les filtres.

Captures d'écran preuve 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>

Chrome-33 IE11 IE9 IE8


456
2018-04-30 20:42



C'est la meilleure solution que je pourrais trouver, ne pas utiliser CSS 3. Et cela fonctionne bien sur Firefox, Chrome et Internet Explorer autant que je peux voir.

Mettez un conteneur DIV et deux DIV enfants dans le même niveau, un pour le contenu, un pour le fond. Et en utilisant CSS, auto-taille de l'arrière-plan pour adapter le contenu et mettre l'arrière-plan 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>


97
2018-05-24 16:07



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

Juste ouvert Photoshop, créer un 2x2 image de pixel (cueillette 1x1 peut provoquer un bug Internet Explorer!), remplissez-le avec une couleur verte et réglez l'opacité dans "l'onglet Calques" à 60%. Puis enregistrez-le et créez-en une image d'arrière-plan:

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

Cela fonctionne cool, bien sûr, sauf dans charmant 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');
}

54
2017-10-05 08:15



Pour une couleur d'arrière-plan 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, une 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 du volet externe:

  • un (le "retour") qui correspond à la taille de l'élément de la fenêtre sans affecter le flux de contenu,
  • et un (le "cont") qui contient le contenu et aide à déterminer la taille du volet.

le position: relative sur le volet est important; il indique la couche arrière pour s'adapter à la taille du volet. (Si vous avez besoin de <p> tag pour être absolu, changer le volet d'un <p> à un <span> et enveloppez tout cela dans une position absolue <p> marque.)

Le principal avantage de cette technique par rapport à ceux listés ci-dessus est que le panneau ne doit pas avoir une taille spécifiée; tel que codé ci-dessus, il s'adaptera à toute la largeur (disposition normale des éléments de bloc) et seulement au contenu. L'élément de la vitre extérieure peut être dimensionné comme vous le souhaitez, à condition qu'il soit rectangulaire (c'est-à-dire que le bloc en ligne fonctionnera, ce qui n'est pas le cas en ligne).

En outre, il vous donne beaucoup de liberté pour le fond; vous êtes libre de mettre vraiment quelque chose dans l'élément arrière et de ne pas affecter le flux de contenu (si vous voulez plusieurs sous-couches en taille réelle, assurez-vous simplement qu'elles ont aussi une position: absolue, largeur / hauteur: 100%, et haut / bas / gauche / droite: auto).

Une variante pour permettre l'ajustement de l'arrière-plan (via haut / bas / gauche / droite) et / ou l'épinglage de l'arrière-plan (en supprimant l'une des paires gauche / droite ou haut / bas) est d'utiliser le CSS suivant:

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

Comme écrit, cela fonctionne dans Firefox, Safari, Chrome, IE8 + et Opera, bien que IE7 et IE6 nécessitent des 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 devrez vous assurer qu'ils sont nettoyés ou autrement contenus, ou ils vont glisser hors du fond.
  • Les marges vont sur l'élément du volet et le remplissage se poursuit sur l'élément cont. N'utilisez pas le contraire (marges sur le cont ou padding sur le volet) 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 bloqué ou en bloc. N'hésitez pas à utiliser <div>s au lieu de <span>s pour simplifier votre CSS.

Une démonstration plus complète, montrant la souplesse de cette technique en l'utilisant en tandem avec display: inline-blocket avec les deux 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 un démo en direct de la technique étant largement utilisée:

christmas-card-2009.slippyd.com screenshot


51
2018-04-30 09:11



Il y a un truc pour minimiser le balisage: Utilisez un pseudo élément comme l'arrière-plan et vous pouvez définir l'opacité sans affecter l'élément principal et ses enfants:

DEMO

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 support du navigateur est Internet Explorer 8 et ensuite.


47
2018-01-14 00:14



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

Vous pouvez utiliser JavaScript pour le faire fonctionner Internet Explorer 6 Si tu as besoin de.

J'utilise la méthode décrite dans Transparents PNG dans Internet Explorer 6.

Autre que ça,

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


23
2018-04-30 09:14



Cette méthode vous permet d'avoir une image en arrière-plan et non seulement une couleur solide, et peut être utilisée pour avoir de la transparence sur d'autres attributs tels que les bordures. Aucune image PNG transparente n'est requise.

Utilisation :before (ou :after) en CSS et leur donner la valeur d'opacité pour 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 le DIV avec classe dad est juste pour fournir un peu de contexte et de contraste aux 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 vers la droite pour laisser visible l'arrière-plan derrière le fancyBgélément):

<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 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 nulles ou plus appropriées à vos besoins).


20
2018-01-26 16:36



Le problème est, que le texte a réellement l'opacité complète dans votre exemple. Il a une opacité complète à l'intérieur du p tag, mais le p l'étiquette est juste semi-transparente.

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

Sinon, ce ne sera pas possible.

MODIFIER:

Tout 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 Internet Explorer ...


14
2017-10-25 13:55



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 est de rejoindre la discussion du groupe de travail CSS et de leur donner un attribut d'opacité de fond! Il devrait fonctionner de pair avec la fonctionnalité multi-arrière-plans.


14
2018-04-30 09:13



Voici comment je fais cela (ce n'est peut-être pas optimal, mais ça marche):

Créer le div que vous voulez être 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 par 300 pixels). Donnez-lui une opacité de 0.5 ou ce que vous voulez, et une couleur de fond.

Puis, DIRECTLY ci-dessous que div, créer une autre div avec un autre classe / ID. Créez un paragraphe à l'intérieur, où vous placerez votre texte. Donner la div position: relative, et haut: -295px (c'est négatif 295 pixels). Donnez-lui un z-index de 2 pour faire bonne mesure, et assurez-vous que son opacité est de 1. Modifiez votre paragraphe comme vous voulez, mais assurez-vous que les dimensions sont inférieures à celles du premier div donc ça ne déborde pas.

C'est tout. 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 sais pas à propos d'Internet Explorer.


13
2018-04-30 09:52