Question CSS opacité seulement à la couleur de fond pas le texte dessus? [dupliquer]


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

Puis-je attribuer le opacity propriété à la background propriété d'un div seulement et pas au texte dessus?

J'ai essayé:

background: #CCC;
opacity: 0.6;

mais cela ne change pas l'opacité.


681
2018-02-27 18:30


origine


Réponses:


Il semble que vous vouliez utiliser un arrière-plan transparent, auquel cas vous pourriez essayer d'utiliser le rgba() fonction:

rgba(R, G, B, A)

R (rouge), G (vert) et B (bleu) peuvent ê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% (opacité totale).

Exemple RGBa

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 montrant comment rgba peut être utilisé.

À partir de 2018, pratiquement chaque navigateur prend en charge le rgba syntaxe.


1211
2018-02-27 18:32



La façon la plus simple de le faire est de 2 divs, 1 avec l'arrière-plan 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>


65
2018-02-27 19:40



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 de contournement. Vous devez avoir un enfant absolument positionné avec un parent relativement positionné pour y parvenir. http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

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


17
2018-02-27 20:02



Pour MOINS utilisateurs seulement:

Si vous n'aimez pas définir vos couleurs en utilisant RGBA, mais en utilisant HEX, il existe 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 que fonction intégrée MOINS Fournissent également:

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

Voir Comment convertir une couleur HEX en rgba avec moins de compilateur?


16
2018-06-26 13:39



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


12
2018-02-17 16:12



J'ai eu le même problème. Je veux une couleur d'arrière-plan 100% transparente, il suffit d'utiliser ce code, ça a bien fonctionné pour moi:

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

Vous pouvez voir des exemples sur le côté gauche sur cette page Web (la zone du formulaire de contact)


7
2018-03-17 09:16



Une excellente façon de le faire serait d'utiliser css3 en effet.

Créez une largeur div une classe - par ex. Supersizer en haut de votre page:

puis définissez 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
2018-03-19 07:17



Pour tous ceux qui rencontrent ce sujet, voici un script appelé thatsNotYoChild.js que je viens d'écrire qui résout automatiquement ce problème:

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

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


2
2018-03-22 04:01



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. Faire la position de la première div relative et mettre celle avec un fond transparent à négative z-index, puis ajustez la position du contenu pour l'adapter à l'arrière-plan transparent. De cette façon, vous n'aurez pas de problèmes avec le positionnement absolu.


1
2018-01-18 10:13



utilisation

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

Cette méthode fonctionnera dans tous les navigateurs


-3
2018-02-03 09:16