Comment appliquer une opacité sans affecter un élément enfant avec html/css?
Je veux atteindre cet objectif en utilisant HTML et CSS:
J'ai essayé de définir l'opacité du conteneur à 0,3 et la boîte à 1, mais cela ne fonctionne pas: les deux div ont une opacité de 0,3.
L’effet que j’essaie d’atteindre est une boîte de dialogue qui apparaît en haut de la page. Il est mis en évidence en atténuant le contenu ci-dessous (en diminuant l'opacité).
Autant que je sache, vous ne pouvez pas le faire simplement. Voici quelques options: 1. Utilisez le positionnement absolu pour positionner la boîte "à l'intérieur" du conteneur.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>
</body>
</html>
- Utilisez Javascript - presque le même que ci-dessus, mais la position et la taille ne doivent pas être codées en dur.
Salut, vous pouvez utiliser l'opicité avec la couleur de fond comme ceci
css
#container {
border: solid gold 1px;
width: 400px;
height: 200px;
background:rgba(56,255,255,0.1);
}
#box {
border: solid silver 1px;
margin: 10px;
width: 300px;
height: 100px;
background:rgba(205,206,255,0.1);
}
HTML
<div id="container">
containter text
<div id="box">
box text
</div>
</div>
Démo en direct http://jsfiddle.net/rohitazad/yT6nG/29/
Essayez d’utiliser rgba comme superposition de contenu avant l’image, c’est un bon moyen de rester réactif et de ne pas affecter les autres éléments.
header #inner_header_post_thumb {
background-position: center;
background-size: cover;
position: relative;
background-image: url(https://images.pexels.com/photos/730480/pexels-photo-730480.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb);
border-bottom: 4px solid #222;
}
header #inner_header_post_thumb .dark_overlay {
position: relative;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.75);
}
header #inner_header_post_thumb .dark_overlay .container .header-txt {
padding-top: 220px;
padding-bottom: 220px;
color: #ffffff;
text-align:center;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h1 {
font-size: 40px;
color: #ffffff;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt h3 {
font-size: 24px;
color: #ffffff;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p {
font-size: 18px;
font-weight: 300;
}
header #inner_header_post_thumb .dark_overlay .container .header-txt p strong {
font-weight: 700;
}<header>
<div id="inner_header_post_thumb">
<div class="dark_overlay">
<div class="container">
<div class="row header-txt">
<div class="col-xs-12 col-sm-12">
<h1>Title On Dark A Underlay</h1>
<h3>Have a dark background image overlay without affecting other elements</h3>
<p>No longer any need to re-save backgrounds as .png ... <strong>Awesome</strong></p>
</div>
</div>
</div>
</div>
</div>
</header>Appliquer cette règle css
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: 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)";
}
De plus, vous devez déclarer background: transparent pour les navigateurs Web IE.
Pour plus de détails, visitez le lien suivant:
Une autre solution consiste à utiliser simplement un arrière-plan de superposition pour créer un effet similaire.
Personnellement, j'aime bien une superposition noire avec une opacité d'environ 65%, mais pour ce que vous essayez de faire, vous pouvez utiliser une superposition blanche autour de 70%.
Créez un petit fichier PNG (100 x 100 ou moins) dans Photoshop ou GIMP ayant la couleur et l'opacité souhaitées. Ensuite, définissez-le comme arrière-plan de votre boîte à lumière.
Si vous créez plusieurs PNG avec différentes opacités, vous pouvez facilement basculer entre eux avec JS ou de manière dynamique au chargement via un script backend.
Ce n’est pas techniquement ce que vous essayez de faire, mais esthétiquement, il peut donner un effet très similaire et la technologie UX accomplit la même chose. C'est aussi très facile à faire et largement supporté dans presque tout.
Ce n'est peut-être pas la méthode la plus orthodoxe, mais vous pouvez utiliser une petite image d'arrière-plan semi-transparente pour chaque div/conteneur qui se répète. Il semble bien qu’à l’époque actuelle, vous devriez être capable de réaliser cela en css pur (simple, pas hackish) sans js, mais comme le montrent les réponses ci-dessus, ce n’est pas si simple ...
L'utilisation d'une image en mosaïque peut sembler obsolète, mais ne vous inquiétez pas pour tous les navigateurs.
Utiliser background-color: rgba(#777788, 0.3); au lieu de l'opacité pourrait peut-être résoudre le problème.
Tout enfant d'un élément avec une opacité définie prendra cette opacité.
Pour obtenir ce style, vous pouvez utiliser les couleurs et les filtres rgba de IE pour l’arrière-plan et l’opacité des éléments textuels. Tant que la deuxième case n'est pas un enfant d'un des éléments de texte, elle n'héritera pas de l'opacité.