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é.
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 .
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>
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
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?
mon truc est de créer un transparent .png avec la couleur et l'utilisation background:url()
.
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)
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>
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.
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.
utiliser
background:url("location of image");//use an image with opacity
cette méthode fonctionnera dans tous les navigateurs
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:
- 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.
- donner le
text
div une couleur de fond solide, parce que ce sera la valeur par défaut de JS-less. - utilisez jQuery pour obtenir la hauteur de div
text
, et l'appliquer à la divbackground
.
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.