CSS opacité de la couleur de fond pas le texte sur elle? [dupliquer]

cette question a déjà une réponse ici:

  • comment donner au texte ou à une image un fond transparent en utilisant CSS? 27 Réponses

puis-je attribuer la propriété opacity à la propriété background d'un div seulement et non pas au texte qui y figure?

j'ai essayé:

background: #CCC;
opacity: 0.6;

mais cela ne change pas l'opacité.

695
demandé sur ᔕᖺᘎᕊ 2011-02-27 21:30:06

11 réponses

il semble que vous vouliez utiliser un fond transparent, auquel cas vous pourriez essayer d'utiliser la fonction rgba() :

rgba(R, G, B, A)

R (Rouge), G (vert), et B (bleu) peut être soit <integer> s ou <percentage> s, où le nombre 255 correspond à 100%. A (alpha) peut être un <number> entre 0 et 1, ou un <percentage> , où le nombre 1 correspond à 100% (full opacité.)

RGBa exemple

rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

Un petit exemple en montrant comment rgba peut être utilisé.

depuis 2018, pratiquement chaque navigateur supporte la "syntaxe 151970920 .

1239
répondu Tim Cooper 2018-06-29 12:17:08

la façon la plus facile de faire ceci est avec 2 divs, 1 avec le fond et 1 avec le texte:

#container {
  position: relative;
  width: 300px;
  height: 200px;
}
#block {
  background: #CCC;
  filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
  /* CSS3 */
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div id="container">
  <div id="block"></div>
  <div id="text">Test</div>
</div>
69
répondu Kostas 2015-03-30 22:10:32

cela fonctionnera avec tous les navigateurs

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:”alpha(opacity=50)”;
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

si vous ne voulez pas que la transparence affecte le conteneur entier et ses enfants, Vérifiez cette solution. Vous devez avoir un enfant absolument positionné avec un parent relativement positionné pour atteindre cet objectif. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements /

vérifier la démo de travail à http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

17
répondu Hussein 2011-02-27 20:02:14

pour moins utilisateurs seulement:

si vous n'aimez pas définir vos couleurs en utilisant RGBA, mais plutôt en utilisant HEX, il y a des solutions.

vous pourriez utiliser un mixin comme:

.transparentBackgroundColorMixin(@alpha,@color) {
  background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}

et l'utiliser comme

.myClass {
    .transparentBackgroundColorMixin(0.6,#FFFFFF);
}

en fait, c'est ce qu'un fonction intégrée moins aussi fournir:

.myClass {
    background-color: fade(#FFFFFF, 50%);
}

voir comment convertir HEX color en rgba avec moins de compilateur?

17
répondu Sebastien Lorber 2018-06-22 13:52:09

mon truc est de créer un transparent .png avec la couleur et l'utilisation background:url() .

12
répondu user1542894 2014-07-27 15:34:00

j'ai eu le même problème. Je veux 100% Transparent couleur de fond, il suffit d'utiliser ce code, Son a fonctionné grand pour moi:

rgba(54, 25, 25, .00004);

vous pouvez voir des exemples sur le à gauche sur cette page web (la zone de formulaire de contact)

7
répondu user2178930 2013-03-17 09:33:06

une grande façon de faire cela serait d'utiliser CSS3 en effet.

créer une div Largeur une classe-par exemple supersizer en haut de votre page:

définit ensuite les propriétés css suivantes:

  .supersizer {
    background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    opacity: 0.5;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    top: 0;
  }
<div class="supersizer"></div>
4
répondu Wolfgang Zotter 2015-03-30 22:24:22

pour quiconque entre dans ce fil, voici un script appelé thatsNotYoChild.js que je viens d'écrire qui résout ce problème automatiquement:

http://www.impressivewebs.com/fixing-parent-child-opacity /

Fondamentalement, il sépare les enfants de l'élément parent, mais conserve l'élément dans le même emplacement physique sur la page.

2
répondu Louis L. 2013-03-22 04:01:42

la solution la plus simple est de créer 3 divs . Un qui contiendra les 2 autres, celui avec fond transparent et celui avec contenu. Faites la position du premier div relative et réglez celle avec fond transparent à négatif z-index , puis ajustez la position du contenu pour s'adapter sur le fond transparent. De cette façon, vous n'aurez pas de problèmes avec le positionnement absolu.

1
répondu Balsa 2013-01-18 10:35:49

utiliser

background:url("location of image");//use an image with opacity

cette méthode fonctionnera dans tous les navigateurs

-3
répondu Neeraj 2014-02-03 09:35:27

vous ne pouvez pas. Vous devez avoir une div séparée qui est juste ce fond, de sorte que vous ne pouvez appliquer l'opacité à cela.

j'ai essayé de le faire récemment, et comme j'utilisais déjà jQuery, j'ai trouvé que ce qui suit était le moins embêtant:

  1. créer les deux divs différents. Ce seront des frères et sœurs, pas enfermés l'un dans l'autre ou quoi que ce soit.
  2. donner le text div une couleur de fond solide, parce que ce sera la valeur par défaut de JS-less.
  3. utilisez jQuery pour obtenir la hauteur de div text , et l'appliquer à la div background .

je suis sûr qu'il y a une sorte de CSS ninja façon de faire tout cela avec seulement des flotteurs ou quelque chose, mais je n'ai pas eu la patience de le découvrir.

-18
répondu sdleihssirhc 2011-02-27 18:32:15