Opacité de l'arrière-plan de div sans affecter l'élément contenu dans IE 8?


112

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.


Vous ne pouvez pas faire ça. La propriété opacity affecte tout le contenu de votre élément (autres éléments html + texte). Mais je ne comprends pas pourquoi vous ne voulez pas utiliser png. Vous n'aurez qu'à changer l'image ensemble vous changez le css (parce que je pense que vous avez différents css qui peuvent être
changés

@Corum: Vous vous trompez (tout autant que moi). C'est possible. Consultez ce billet de blog. robertnyman.com/2010/01/11/… Incroyablement intelligent.
Robert Koritnik le

Je viens de poster ici: < stackoverflow.com/a/11755175/1491212 > Cela pourrait aider j'espère!
Armel Larcier

Réponses:


236

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)


1
brillant! Cela m'a beaucoup aidé.
Jordan Starrk

22

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/


1
Qu'est-ce que les dégradés ont à voir avec l'opacité? : S
Robert Koritnik

@Robert Koritnik: Voir ma version de cette réponse pour une meilleure explication - stackoverflow.com/questions/5160419/… également ici: stackoverflow.com/questions/4788564/…
thirtydot

@robert, c'est un seul filtre IE disponible sur le Web, il a donné le même effet que rgba et je ne suis pas un expert en filtres.
sandeep

@Robert ça marche;) voir ce lien - @sandeep J'ai corrigé le code du filtre pour ajouter les ingrédients nécessaires (fond transparent et hasLayout), changer l'ordre du filtre .. n'hésitez pas à revenir en arrière si vous n'êtes pas d'accord;)
clairesuzy

1
Les filtres @sandeep ne fonctionneront pas sans hasLayout, vous pouvez avoir une autre propriété hasLayout dans votre code, largeur peut-être? Je travaille à une main..brise mon poignet d'où mes réponses lentes, mais voici jsfiddle avec le code IE pertinent dans un commentaire conditionnel pour la comparaison des deux méthodes
clairesuzy

8

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.


c'est la bonne réponse, fonctionnant même avec bg-images
Botea Florin


1

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>


0

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);
}

2
Cela affecte aussi le contenu!
Germa Vinsmoke

0

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.


0

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;
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.