2419 votes

Un fond transparent, mais pas le contenu (texte et images) à l'intérieur, en CSS uniquement ?

Est-il possible, en utilisant uniquement des CSS, de faire en sorte que l'élément background d'un élément semi-transparent mais le contenu (texte et images) de l'élément doit être non transparent ?

J'aimerais y parvenir sans que le texte et l'arrière-plan soient deux éléments distincts.

En essayant

<p>
  <span>
    Hello world
  </span>
  <img src="myImage.jpg">
</p>

p { background-color:green; filter:alpha(opacity=60); opacity:.6; }
span, img { color:white; filter:alpha(opacity=100); opacity:1; }

Il semble que les éléments enfants soient soumis à l'opacité de leurs parents, donc opacity:1 est relative à la opacity:.6 du parent.

20 votes

Malheureusement non, CSS3 vise à corriger ce problème avec le nouveau module de couleur, qui vous permettra de spécifier une valeur alpha chaque fois que vous indiquez une couleur. w3.org/TR/css3-color

75 votes

En fait, l'opacité des éléments enfants est multiplié par l'opacité de l'élément parent, qui n'est pas remplacée. Ainsi, par exemple, si l'élément p L'opacité de l'entreprise était .6 et le span L'opacité de l'entreprise était .5 alors l'opacité réelle du texte dans le span serait de 0.3 .

0 votes

Cet exemple vivant est-il ce que nous avons réalisé dans cette réponse ? codepen.io/pablofiumara/pen/EIFaH

2345voto

Georg Schölly Points 63123

Soit utiliser un produit semi-transparent PNG ou utiliser CSS3 :

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

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

91 votes

Est-il possible de faire cela avec des couleurs hexagonales ? Comme #fff ?

1 votes

Rgba(R,G,B, "transparency"), donc ce n'est pas possible avec l'hex, parce qu'il n'y a pas de valeur pour la partie "transparence" dans l'hexcode.

0 votes

Vous pouvez le faire, mais vous devez le convertir du code hexadécimal à son équivalent RVB. #RR,GG,BB si je ne me trompe pas... mais dans tous les cas, il suffit de convertir les deux caractères hexadécimaux en décimales, qui seront comprises entre 255 et 0, et que vous pourrez ensuite utiliser directement comme ceci

481voto

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

Une astuce peu connue est que vous pouvez l'utiliser dans Internet Explorer également en utilisant le 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 chiffre hexadécimal définit la valeur alpha de la couleur.

Solution complète pour 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 vient de Transparence de l'arrière-plan en CSS sans affecter les éléments enfants, par le biais de RGBa et de filtres .

Captures d'écran prouvant les 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-33IE11IE9IE8

1 votes

Mais pas dans IE8. J'ai essayé la nouvelle syntaxe -ms-filter mais ça ne marche toujours pas pour moi :(

5 votes

Ce post montre comment le faire dans IE8 : robertnyman.com/2010/01/11/

14 votes

@philfreo : Si vous changez la première partie du code de Sebastian en "background : rgb(0, 0, 0) transparent ;", cela devrait maintenant fonctionner dans IE8. Cela m'a gêné pendant un certain temps !

115voto

Gorkem Pacaci Points 1015

C'est la meilleure solution que j'ai trouvée, sans utiliser CSS 3, et elle fonctionne parfaitement sur Firefox, Chrome et Internet Explorer, pour autant que je sache.

Mettez un DIV conteneur et deux DIV enfants au même niveau, un pour le contenu, un pour l'arrière-plan :

<div class="container">
   <div class="content">
       Here is the content. <br />
       Background should grow to fit.
   </div>
   <div class="background"></div>
</div>

Et à l'aide de CSS, redimensionnez automatiquement l'arrière-plan pour l'adapter au contenu et placez l'arrière-plan à l'arrière en utilisant le 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;
   }

19 votes

Il a dit "Sans séparer le texte et le fond en deux éléments positionnés l'un sur l'autre". Merci quand même, c'est un bon correctif et c'est utile, mais dans certains cas, vous voudriez que l'élément opaque soit un enfant de l'élément semi-transparent.

0 votes

J'ai répondu à peu près la même chose sur une autre question de SO mais j'ai ajouté un jsfiddle et des preuves par captures d'écran (IE7+), voir ici si cela vous intéresse. stackoverflow.com/a/21984546/759452

0 votes

@Gorkem Pacaci : Assurez-vous que les propriétés d'opacité sont "vraiment" cross-browser, vous pouvez utiliser cet extrait de code de CSSTRICKS css-tricks.com/snippets/css/cross-browser-opacity

66voto

Slipp D. Thompson Points 6293

Pour une simple couleur d'arrière-plan semi-transparente, les solutions ci-dessus (CSS3 ou images bg) sont les meilleures options. Toutefois, si vous ne voulez pas compter sur CSS3 ou si vous voulez faire quelque chose de plus sophistiqué (par exemple, animation, arrière-plans multiples, etc.), vous pouvez essayer la "technique du volet" :

<style type="text/css" media="all">
    .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;
    }
</style>

<p class="pane">
    <span class="back" style="background: #0f0; opacity: 0.6;"></span>
    <span class="cont">Pane lives here...</span>
</p>

Cette technique fonctionne en utilisant deux "couches" à l'intérieur de l'élément du volet extérieur :

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

Le site position: relative sur le volet est important ; il indique au calque arrière de s'adapter à la taille du volet. (Si vous avez besoin de la <p> pour qu'elle soit absolue, changez le volet d'une balise <p> à un <span> et envelopper tout ça dans une position absolue. <p> tag.)

Le principal avantage de cette technique par rapport aux techniques similaires énumérées ci-dessus est que le volet n'a pas besoin d'avoir une taille spécifique ; tel que codé ci-dessus, il s'adaptera à la largeur totale (disposition normale des éléments de bloc) et ne sera pas plus haut que le contenu. L'élément extérieur du volet peut être dimensionné comme vous le souhaitez, à condition qu'il soit rectangulaire (c'est-à-dire qu'un bloc en ligne fonctionnera, mais pas un simple bloc en ligne).

De plus, il vous donne une grande liberté pour l'arrière-plan ; vous pouvez mettre n'importe quoi dans l'élément arrière sans que cela n'affecte le flux du contenu (si vous voulez plusieurs sous-couches de taille normale, assurez-vous qu'elles ont également les paramètres suivants : position : absolute, width/height : 100%, et top/bottom/left/right : auto).

Pour permettre l'ajustement de l'insertion de l'arrière-plan (par le biais du haut/bas/gauche/droite) et/ou l'épinglage de l'arrière-plan (en supprimant l'une des paires gauche/droite ou haut/bas), il est possible d'utiliser le CSS suivant :

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

Tel qu'il est écrit, il 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 variation CSS ne fonctionne pas dans Opera.

Les choses à surveiller :

  • Les éléments flottants à l'intérieur de la couche cont ne seront pas contenus. Vous devrez vous assurer qu'ils sont effacés ou contenus d'une autre manière, sinon ils glisseront hors du fond.
  • Les marges vont sur l'élément pane et le rembourrage va sur l'élément cont. N'utilisez pas l'inverse (marges sur l'élément cont ou remplissage sur l'élément pane) ou vous découvrirez des bizarreries comme le fait que la page soit toujours légèrement plus large que la fenêtre du navigateur.
  • Comme indiqué, l'ensemble doit être en bloc ou en ligne. N'hésitez pas à utiliser <div> au lieu de <span> pour simplifier votre CSS.

Une démonstration en direct de la technique utilisée de manière intensive est disponible à l'adresse suivante :

J'espère que cela vous aidera.

0 votes

Dans quelle situation ne voudrait-on pas utiliser CSS3 pour cela ?

0 votes

@Burkely91 Si vous pouvez le faire en CSS3, alors utilisez-le absolument. Mais le fond CSS3 ne prend pas en charge tous les types de contenu ni la flexibilité de mise en page. L'exemple de l'enveloppe et de la lettre ci-dessus serait difficile à réaliser en CSS3 en raison de la répétition indépendante des bords et du remplissage central. N'oubliez pas non plus que cette réponse a été rédigée il y a 5 ans, avant que la prise en charge des CSS3 ne soit généralisée.

2 votes

@Igor Ivancha J'ai annulé vos modifications. Je suis désolé, mais changer l'indentation de ma forme préférée (tabulations) à la vôtre (2 espaces) n'est pas cool. Vous pouvez avoir de bonnes raisons d'utiliser l'indentation à 2 espaces dans vos projets de code au jour le jour, mais pour la présentation sur le web, je crois que les tabulations sont clairement gagnantes - l'indentation plus profonde permet de discerner plus facilement les niveaux de hiérarchie, et il est beaucoup plus facile de convertir de manière fiable les tabulations en espaces et donc une forme plus compatible de tous les lecteurs.

58voto

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

Il suffit d'ouvrir Photoshop, de créer un 2x2 image pixel ( cueillir 1x1 peut provoquer un bug d'IE ! ), remplissez-le d'une couleur verte et réglez l'opacité à 60% dans l'onglet "Layers". Ensuite, enregistrez-la et faites-en une image d'arrière-plan,

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

Cela fonctionne bien, bien sûr, sauf dans l'adorable IE6. Il existe de meilleures solutions, mais voici une solution 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');
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X