Opacité du fond de div sans affecter l'élément contenu dans IE 8?
Je veux définir l'opacité de l'arrière-plan de div sans affecter l'élément contenu dans IE 8. avoir une solution quelconque et ne répond pas pour définir une image 1 X 1 .png et définir l'opacité de cette image, car j'utilise dynamique l'opacité et la couleur admin peuvent changer cela
Je l'ai utilisé mais ne travaille pas dans IE 8
#alpha {
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
et
rgba(0,0,0,0.3)
aussi.
Le style opacity affecte tout l'élément et tout ce qu'il contient. La bonne réponse à cette question consiste à utiliser une couleur de fond rgba à la place.
Le CSS est assez simple:
.myelement {
background: rgba(200, 54, 54, 0.5);
}
... où les trois premiers chiffres correspondent aux valeurs rouge, verte et bleue de votre couleur d'arrière-plan, et le quatrième correspond à la valeur du canal "alpha", qui fonctionne de la même manière que la valeur opacity.
Voir cette page pour plus d'infos: http://css-tricks.com/rgba-browser-support/
L'inconvénient, c'est que cela ne fonctionne pas dans IE8 ou inférieur. La page que j'ai liée ci-dessus répertorie également quelques autres navigateurs pour lesquels il ne fonctionne pas, mais ils sont tous très anciens maintenant; Tous les navigateurs actuellement utilisés, à l'exception d'IE6/7/8, fonctionneront avec les couleurs rgba.
La bonne nouvelle est que vous pouvez forcer IE à travailler avec cela également, en utilisant un hack appelé CSS3Pie . CSS3Pie ajoute un certain nombre de fonctionnalités CSS3 modernes aux anciennes versions d'IE, y compris les couleurs d'arrière-plan rgba.
Pour utiliser CSS3Pie pour les arrière-plans, vous devez ajouter une déclaration -pie-background spécifique à votre CSS, ainsi que le style PIE behavior. Votre feuille de style se présentera ainsi:
.myelement {
background: rgba(200, 54, 54, 0.5);
-pie-background: rgba(200, 54, 54, 0.5);
behavior: url(PIE.htc);
}
J'espère que ça t'as aidé.
[MODIFIER]
Comme cela a déjà été mentionné, vous pouvez utiliser le style filter d'IE, avec le mot clé gradient d'IE. La solution CSS3Pie utilise effectivement cette même technique en coulisse, mais vous évite d'avoir à manipuler directement les filtres d'IE, de sorte que vos feuilles de style sont beaucoup plus propres. (Il ajoute également toute une série d'autres fonctionnalités de Nice, mais ce n'est pas pertinent pour cette discussion.)
il est simple que vous avez à faire est de donner
background: rgba(0,0,0,0.3)
& for IE utilise ce filtre
background: transparent;
zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
vous pouvez générer votre filtre rgba à partir d'ici http://kimili.com/journal/rgba-hsla-css-generator-for-internet-Explorer/
opacity sur l'élément parent le définit pour l'ensemble de l'arborescence DOM
Vous ne pouvez pas vraiment définir l'opacité pour certains éléments qui ne seraient pas transmis en cascade aux descendants. Ce n'est pas comme ça que CSS opacity fonctionne Je crains fort.
Ce que vous pouvez faire est d'avoir deux éléments frères dans un même conteneur et de définir le positionnement de son transparent:
<div id="container">
<div id="transparent"></div>
<div id="content"></div>
</div>
alors vous devez définir transparent position: absolute/relative pour que son contenu soit rendu par dessus.
rgba peut faire la transparence de fond des fonds colorés
rgba le réglage de la couleur sur background-color de l'élément fonctionnera bien sûr, mais vous ne pourrez utiliser que la couleur comme arrière-plan. Pas d'images, j'ai peur. Vous pouvez bien sûr utiliser les dégradés CSS3 si vous fournissez des couleurs d’arrêt de dégradé dans rgba. Cela fonctionne aussi bien.
Mais sachez que rgba risque de ne pas être pris en charge par les navigateurs requis.
Sans alerte fonctionnalité de dialogue modal
Mais si vous souhaitez masquer toute la page, vous devez généralement ajouter un div distinct avec cet ensemble de styles:
position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);
Ensuite, lorsque vous affichez le contenu, il doit avoir un z-index supérieur. Mais ces deux éléments ne sont pas liés en termes de frères et sœurs ou quoi que ce soit. Ils sont simplement affichés comme ils le devraient. L'un sur l'autre.
Essayez de placer l'index z plus haut sur l'élément contenu.
Qu'en est-il de cette approche:
<head>
<style type="text/css">
div.gradient {
color: #000000;
width: 800px;
height: 200px;
}
div.gradient:after {
background: url(SOME_BACKGROUND);
background-size: cover;
content:'';
position:absolute;
top:0;
left:0;
width:inherit;
height:inherit;
opacity:0.1;
}
</style>
</head>
<body>
<div class="gradient">Text</div>
</body>Peut-être qu'il y a une réponse plus simple, essayez d'ajouter n'importe quelle couleur de fond que vous aimez au code, comme background-color: #fff;
#alpha {
background-color: #fff;
opacity: 0.8;
filter: alpha(opacity=80);
}
Cela affecte toutes les divisions enfants lorsque vous utilisez la fonction d'opacité avec des positions autres qu'absolue. Donc, une autre façon de le faire consiste à ne pas mettre les divs l'un dans l'autre et à utiliser ensuite la position absolute pour les divs. N'utilisez aucune couleur de fond pour la div supérieure.