2317 votes

Arrière-plan Transparent, mais pas le contenu (texte et images) à l'intérieur, dans le CSS?

Est-il possible, à l'aide de CSS, pour faire de l' background d'un élément semi-transparent, mais le contenu (texte et images) de l'élément non-transparent?

Je voudrais accomplir cela sans avoir le texte et le fond de deux éléments distincts.

Lorsque vous essayez

<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 ressemble à l'enfant les éléments sont soumis à l'opacité de leurs parents, opacity:1 est relative à l' opacity:.6 de la société mère.

2294voto

Georg Schölly Points 63123

Soit utiliser un semi-transparent PNG image ou d'utiliser CSS3:

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

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

476voto

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

Une petite astuce est que vous pouvez utiliser dans Internet Explorer en utilisant le gradient de filtre.

background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');

Le premier numéro hexadécimal définit la valeur alpha de la couleur.

Solution complète de 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 à partir de CSS d'un fond transparent, sans affecter les éléments d'enfant, à travers RGBa et les filtres.

Captures d'écran de la preuve des résultats:

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>

Chrome-33IE11IE9IE8

108voto

Gorkem Pacaci Points 1015

C'est la meilleure solution que je pouvais venir avec, et non PAS à l'aide de CSS 3. Et il fonctionne très bien sur Firefox, Chrome et Internet Explorer aussi loin que je peux voir.

Mettre un DIV conteneur et deux enfants DIVs dans le même niveau, l'un pour le contenu, l'un pour le fond:

<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, auto-taille de l'arrière-plan pour adapter le contenu et le mettre à l'arrière-plan fait dans le dos à 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;
   }

64voto

Slipp D. Thompson Points 6293

Pour un simple semi-transparent couleur d'arrière-plan, les solutions ci-dessus (CSS3 ou bg images) sont les meilleures options. Toutefois, si vous ne voulez pas compter sur CSS3 ou si vous voulez faire quelque chose de fantaisiste (par exemple, de l'animation, des arrière-plans multiples, etc.), vous pouvez essayer le "volet technique":

<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>

La technique fonctionne à l'aide de deux "couches" à l'intérieur du volet externe de l'élément:

  • l'un (le "retour") qui s'adapte à la taille de la fenêtre de l'élément sans affecter le flux de contenu,
  • et une (la "suite") qui contient le contenu, et permet de déterminer la taille de la fenêtre.

L' position: relative sur le volet est important; il raconte une couche arrière pour s'adapter à la fenêtre de sa taille. (Si vous avez besoin de l' <p> balise absolu, changer le volet à partir d'un <p> d'un <span> et envelopper le tout dans un absolument position <p> balise.)

Le principal avantage de cette technique est de plus de ceux énumérés ci-dessus, c'est que le volet ne doit pas être d'une taille spécifiée; codé ci-dessus, il fit toute la largeur (normal bloc-élément de mise en page) et atteint seulement le contenu. Le volet externe de l'élément peut être de la taille d'une quelconque manière, vous s'il vous plaît, tant qu'il est rectangulaire (c'est à dire inline-block travail; plaine-vieux inline ne sera pas).

Aussi, il vous donne beaucoup de liberté pour l'arrière-plan; vous êtes libre de mettre vraiment quelque chose dans le dos de l'élément et ne l'ai pas affecter le flux de contenu (si vous souhaitez que plusieurs plein taille des sous-couches, assurez-vous qu'ils ont aussi des position: absolute, largeur/hauteur: 100%, et haut/bas/gauche/droite: auto).

Une variation de permettre à fond encart de réglage (via le haut/bas/gauche/droite) et/ou de fond de l'épinglage (de par la suppression de l'un de la gauche/droite ou haut/bas paires) est d'utiliser le code CSS suivant à la place:

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

Comme l'écrit, cela fonctionne dans Firefox, Safari, Chrome, IE8+, et de l'Opéra, bien que IE7 et IE6 supplémentaires, CSS et expressions, autant que je me souvienne, et la dernière fois que j'ai vérifié, le second CSS variation ne fonctionne pas à l'Opéra.

Les choses à surveiller:

  • Les éléments flottants à l'intérieur de la suite de la couche ne sera pas. Vous aurez besoin pour s'assurer qu'ils sont effacés, ou contenu, ou ils vont glisser sur le fond de l'.
  • Les marges aller sur le volet élément de rembourrage et va sur la suite de l'élément. Ne pas faire usage de la face (marges sur la suite ou de rembourrage sur le volet) ou vous découvrirez des bizarreries comme la page toujours être légèrement plus large que la fenêtre du navigateur.
  • Comme mentionné, l'ensemble doit être block ou inline-block. N'hésitez pas à utiliser <div>s au lieu de <span>s pour simplifier votre CSS.

Une démo en live de la technique qui est largement utilisé peut être trouvé à:

Espérons que cette aide.

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