web-dev-qa-db-fra.com

Comment faire un fond transparent sans image de fond?

Je voudrais qu'une div ait un fond transparent.
J'ai essayé de faire cela en utilisant background-color et opacity, mais le problème est que la bordure et le texte à l'intérieur deviennent également transparents. Exemple ici.

Est-il possible d'y parvenir sans utiliser une image d'arrière-plan PNG transparente?

htmlcsstransparentbackground-color
10
Misha Moroshko

Si vous souhaitez simplement que la couleur de l'arrière-plan soit transparente et non le contenu enfant, utilisez 

background-color: rgba(0,0,0,.5); // Sets to 50% transparent

Voir cette page pour plus de détails - c'est une spécification css3 donc ne sera pas affiché dans tous les navigateurs:

http://www.css3.info/introduction-opacity-rgba/

19
DHuntrods

Oui.

Définissez background-color: transparent;

et n'utilisez pas opacity, car c'est ce qui rend semi-transparent toute la div ..

mis à jour votre exemple à http://jsfiddle.net/eU7By/1/

UPDATE after comments

vous pouvez utiliser rgba pour la couleur de fond comme le mentionne @DHuntrods. IE a besoin de quelques retouches de cours .. http://leaverou.me/2009/02/bulletproof-cross-browser-rgba-backgrounds/

5
Gabriele Petrioli

La solution la plus multi-navigateur consiste à utiliser la propriété opacity sur un élément enfant supplémentaire "positionné absolument" (dans un parent positionné de manière relative ou absolue): il ne doit contenir que l'arrière-plan transparent coloré.

Ensuite, vous pouvez utiliser la propriété opacity pour rendre cet élément transparent. Puisque cet élément n'a pas d'enfants, l'opacité n'affectera aucun autre élément.

Opacity est une propriété IE5 +, utilisez simplement (voir http://css-tricks.com/snippets/css/cross-browser-opacity/ ):

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";    /* IE 8 */
filter: alpha(opacity=50);  /* IE 5-7 */
-moz-opacity: 0.5;          /* Netscape */
-khtml-opacity: 0.5;        /* Safari 1.x */
opacity: 0.5;               /* Good browsers */

voir l'exemple jsFiddle http://jsfiddle.net/DUjzX/1/

Le code entier ressemble à:

Le code HTML: 

 <div class="my-cool-wrapper">
      <div class="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>
      <div class="transparent-background">
      </div>
 </div>

Le CSS: 

 .my-cool-wrapper {
      position: relative;
 }
 .my-cool-wrapper .text-and-images-on-top {
      padding: 10px 15px 19px 15px;
      z-index: 1;
      position: relative; /* needed to enable the z-index */
 }
 .my-cool-wrapper .transparent-background {
      position: absolute;
      top: 0;    
      width: 100%;
      height: 100%;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";       /* IE 8 */
      filter: alpha(opacity=10);  /* IE 5-7 */
      -moz-opacity: 0.1;          /* Netscape */
      -khtml-opacity: 0.1;        /* Safari 1.x */
      opacity: 0.1;               /* Good browsers */
      background-color: blue;
 }

en savoir plus: Définir l'opacité de l'image d'arrière-plan sans affecter les éléments enfants

Captures d'écran IE7IE8IE9IE10IE11

ps: Je n'ai pas ajouté les captures d'écran pour Chrome, Firefox et Safari, car ce sont de "meilleurs" navigateurs ... faites-moi confiance, cela fonctionne aussi pour eux.

1
Adrien Be

Je devais utiliser un gif transparent 30x30 comme arrière-plan.

background:url('absolute path here');
0
Amalgovinus