Opacité de l'arrière-plan 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 pas répondre pour définir une image .png 1 X 1 et définir l'opacité de cette image car j'utilise l'opacité dynamique et la couleur que l'administrateur peut changer cette

Je l'ai utilisé mais ne fonctionne 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 opacitystyle affecte tout l'élément et tout ce qu'il contient. La bonne réponse à cela est d'utiliser une couleur d'arrière-plan rgba à la place.

Le CSS est assez simple:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... où les trois premiers nombres sont les valeurs rouge, verte et bleue de votre couleur d'arrière-plan, et le quatrième est la valeur du canal «alpha», qui fonctionne de la même manière que la opacityvaleur.

Consultez cette page pour plus d'informations: http://css-tricks.com/rgba-browser-support/

L'inconvénient, c'est que cela ne fonctionne pas dans IE8 ou une version inférieure. La page que j'ai liée ci-dessus répertorie également quelques autres navigateurs dans lesquels elle ne fonctionne pas, mais ils sont tous très anciens maintenant; tous les navigateurs en cours d'utilisation sauf IE6 / 7/8 fonctionneront avec les couleurs rgba.

La bonne nouvelle est que vous pouvez également forcer IE à travailler avec cela, 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 -pie-backgrounddéclaration spécifique à votre CSS, ainsi que le behaviorstyle PIE , afin que votre feuille de style finisse par ressembler à ceci:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

J'espère que cela pourra aider.

[ÉDITER]

Pour ce que ça vaut, comme d'autres l'ont mentionné, vous pouvez utiliser le filterstyle d'IE , avec le gradientmot - clé. La solution CSS3Pie utilise en fait cette même technique dans les coulisses, mais vous évite d'avoir à jouer directement avec les filtres d'IE, de sorte que vos feuilles de style sont beaucoup plus propres. (il ajoute également tout un tas d'autres fonctionnalités intéressantes, mais ce n'est pas pertinent pour cette discussion)

c'est simple il suffit de donner

background: rgba(0,0,0,0.3)

& pour IE, utilisez 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 du sous-DOM

Vous ne pouvez pas vraiment définir l'opacité pour certains éléments qui ne se répercuteraient pas non plus sur les descendants. Ce n'est pas ainsi que opacityfonctionne le CSS , j'en ai peur.

Ce que vous pouvez faire est d'avoir deux éléments frères dans un même conteneur et de définir un positionnement transparent:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

alors vous devez définir transparent position: absolute/relativeafin que son frère de contenu soit rendu dessus.

rgba peut faire la transparence d'arrière-plan des arrière-plans colorés

rgbale réglage de la couleur sur l'élément background-colorfonctionnera bien sûr, mais il vous limitera à n'utiliser que la couleur comme arrière-plan. Pas d'images, j'ai peur. Vous pouvez bien sûr utiliser des dégradés CSS3 si vous fournissez des couleurs d'arrêt de dégradé dans rgba. Cela fonctionne aussi.

Mais sachez que cela rgbapeut ne pas être pris en charge par vos navigateurs requis.

Fonctionnalité de dialogue modal sans alerte

Mais si vous recherchez une sorte de masquage de la page entière, cela se fait généralement en ajoutant un autre div 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 devrait avoir une valeur plus élevée z-index. 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 devraient l'être. L'un sur l'autre.

Essayez de définir le z-index 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 y a-t-il une réponse plus simple, essayez d'ajouter n'importe quelle couleur d'arrière-plan que vous aimez au code, comme background-color: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

Cela affecte l'ensemble des div enfants lorsque vous utilisez la fonction d'opacité avec des positions autres qu'absolues. Donc, une autre façon d'y parvenir est de ne pas mettre les divs les uns dans les autres puis d'utiliser la position absolue pour les divs. N'utilisez aucune couleur d'arrière-plan pour le div supérieur.

Utilisez RGBA ou si vous utilisez un code hexadécimal, changez-le en rgba. Pas besoin de faire un élément css presodu .

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

OU

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;