Question Opacité de fond CSS [dupliquer]
Cette question a déjà une réponse ici:
J'utilise quelque chose de similaire au code suivant:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Je m'attendais à ce que l'arrière-plan ait une opacité de 0.4 et que le texte ait 100% d'opacité. Au lieu de cela, ils ont tous les deux une opacité de 0.4.
522
2018-05-02 23:05
origine
Réponses:
Les enfants héritent de l'opacité. Ce serait bizarre et gênant s'ils ne le faisaient pas.
Vous pouvez utiliser un png translucide pour votre image d'arrière-plan ou utiliser une couleur RGBa (a pour alpha) pour votre couleur d'arrière-plan.
Exemple, 50% de fond noir décoloré:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
927
2018-05-02 23:07
Vous pouvez utiliser CSS 3 :before
avoir un fond semi-transparent et vous pouvez le faire avec un seul conteneur. Utilisez quelque chose comme ça
<article>
Text.
</article>
Ensuite, appliquez un peu de CSS
article {
position: relative;
z-index: 1;
}
article::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .4;
z-index: -1;
background: url(path/to/your/image);
}
Échantillon: http://codepen.io/anon/pen/avdsi
Remarque: Vous devrez peut-être ajuster le z-index
valeurs.
128
2017-09-24 15:26
Les méthodes suivantes peuvent être utilisées pour résoudre votre problème
Méthode de transparence CSS Aplha (ne fonctionne pas dans IE 8)
#div{background-color:rgba(255,0,0,0.5);}
Utilisez une image png transparente selon votre choix comme arrière-plan.
Utilisez l'extrait de code CSS ci-dessous pour créer un arrière-plan transparent pour plusieurs pages. Voici un exemple avec #000000
@ 0,4% d'opacité
.div {
background:rgb(0,0,0);
background: transparent\9;
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
Pour plus de détails concernant cette technique, voir ce, qui a un générateur de CSS en ligne.
38
2017-09-24 16:06
Je ferais quelque chose comme ça
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
Devrait marcher. C'est supposer que vous devez avoir une image semi-transparente btw, et pas une couleur (que vous devriez utiliser rgba pour). Aussi supposé est que vous ne pouvez pas simplement modifier l'opacité de l'image à l'avance dans Photoshop.
23
2018-05-02 23:28
.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: 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)";}
6
2018-03-16 06:08
Vous pouvez utiliser sass transparentize
,
Je l'ai trouvé le plus utile et le plus simple à utiliser.
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
Voir plus: http://sass-lang.com/documentation/Sass/Script/Functions.html#transparentize-instance_method
4
2018-03-21 12:53
C'est parce que le div interne a 100% de l'opacité du div où il est imbriqué (qui a 40% d'opacité).
Pour le contourner, il y a quelques choses que vous pourriez faire.
vous pourriez créer deux divs distincts comme ça:
<div id="background"></div>
<div id="bContent"></div>
définissez l'opacité css et les autres propriétés souhaitées pour l'arrière-plan hte et utilisez la propriété z-index (z-index) pour styliser et positionner la div bContent. Avec cela, vous pouvez placer l'overtope div de l'arrière-plan div sans avoir l'opacité mucked avec.
Une autre option est de RGBa. Cela vous permettra d'imbriquer vos divs tout en obtenant une opacité spécifique à div.
La dernière option consiste simplement à faire une image .png semi-transparente de la couleur que vous voulez dans l'éditeur d'image de votre choix, à définir la propriété background-image sur l'url de l'image et vous n'aurez plus à vous soucier de avec le CSS et perdre la capacité et l'organisation d'une structure div imbriquée.
3
2018-05-02 23:14