Deckkraft des Hintergrunds von div, ohne das enthaltene Element in IE 8 zu beeinflussen?

Ich möchte die Deckkraft des Hintergrunds von div einstellen, ohne das in IE 8 enthaltene Element zu beeinflussen. Ich habe eine Lösung und antworte nicht, um 1 x 1 .png-Bild und Deckkraft dieses Bildes festzulegen, da ich dynamische Deckkraft verwende und der Farbadministrator sich ändern kann Das

Ich habe das benutzt, aber nicht in IE 8 gearbeitet

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

und

rgba(0,0,0,0.3)

ebenfalls.

Der opacityStil wirkt sich auf das gesamte Element und alles darin aus. Die richtige Antwort darauf ist, stattdessen eine RGBA-Hintergrundfarbe zu verwenden.

Das CSS ist ziemlich einfach:

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

... wobei die ersten drei Zahlen die roten, grünen und blauen Werte für Ihre Hintergrundfarbe sind und die vierte der Alpha-Kanalwert, der genauso funktioniert wie der opacityWert.

Weitere Informationen finden Sie auf dieser Seite: http://css-tricks.com/rgba-browser-support/

Der Nachteil ist, dass dies in IE8 oder niedriger nicht funktioniert. Die Seite, die ich oben verlinkt habe, listet auch einige andere Browser auf, in denen es nicht funktioniert, aber sie sind mittlerweile alle sehr alt. Alle derzeit verwendeten Browser außer IE6 / 7/8 funktionieren mit RGBA-Farben.

Die gute Nachricht ist, dass Sie den IE auch dazu zwingen können, mit einem Hack namens CSS3Pie zu arbeiten . CSS3Pie erweitert ältere IE-Versionen um eine Reihe moderner CSS3-Funktionen, einschließlich der Hintergrundfarben für RGBA.

Um CSS3Pie für Hintergründe zu verwenden, müssen Sie -pie-backgroundIhrem CSS eine bestimmte Deklaration sowie den PIE- behaviorStil hinzufügen , damit Ihr Stylesheet folgendermaßen aussieht :

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

Hoffentlich hilft das.

[BEARBEITEN]

Wie bereits erwähnt, können Sie für das, was es wert ist, den IE- filterStil mit dem gradientSchlüsselwort verwenden. Die CSS3Pie-Lösung verwendet tatsächlich dieselbe Technik hinter den Kulissen, macht jedoch das direkte Herumspielen mit den IE-Filtern überflüssig, sodass Ihre Stylesheets viel sauberer sind. (Es fügt auch eine ganze Reihe anderer netter Funktionen hinzu, aber das ist für diese Diskussion nicht relevant.)

Es ist einfach, nur du musst geben

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

& für IE diesen Filter verwenden

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 */

Sie können Ihren RGBA-Filter hier generieren: http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

opacity on parent element legt es für den gesamten Sub-DOM-Baum fest

Sie können die Deckkraft für bestimmte Elemente, die nicht auch für Nachkommen gelten, nicht wirklich festlegen. So ist CSS nichtopacityIch fürchte, so .

Was Sie tun können, ist, zwei Geschwisterelemente in einem Container zu haben und die Positionierung transparent zu machen:

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

dann müssen Sie transparent einstellen, position: absolute/relativedamit das Inhaltsgeschwister darüber gerendert wird.

rgba kann Hintergrundtransparenz von farbigen Hintergründen tun

rgbaDie Farbeinstellung des Elements background-colorfunktioniert natürlich, aber Sie können nur Farbe als Hintergrund verwenden. Keine Bilder, fürchte ich. Sie können natürlich auch CSS3-Verläufe verwenden, wenn Sie Verlaufsstoppfarben in angebenrgba . Das funktioniert auch.

Beachten Sie jedoch, dass dies rgbamöglicherweise nicht von Ihren erforderlichen Browsern unterstützt wird.

Alarmfrei modale Dialogfunktionalität

Wenn Sie jedoch die gesamte Seite maskieren möchten, fügen Sie in der Regel eine separate Seite divmit folgenden Stilen hinzu:

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

Wenn Sie dann den Inhalt anzeigen, sollte er einen höheren Wert haben z-index. Aber diese beiden Elemente sind nicht in Bezug auf Geschwister oder irgendetwas verwandt. Sie werden nur so angezeigt, wie sie sein sollten. Eins über das andere.

Versuchen Sie, den Z-Index für das enthaltene Element höher einzustellen.

Was ist mit diesem Ansatz:

	<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>

Vielleicht gibt es eine einfachere Antwort: Versuchen Sie, dem Code eine beliebige Hintergrundfarbe hinzuzufügen, z. B. Hintergrundfarbe: #fff;

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

Dies wirkt sich auf die gesamten untergeordneten Divs aus, wenn Sie die Deckkraftfunktion mit anderen Positionen als absolut verwenden. Ein anderer Weg, um dies zu erreichen, besteht darin, keine Divs ineinander zu setzen und dann die absolute Position für die Divs zu verwenden. Verwenden Sie keine Hintergrundfarbe für das obere Div.

Verwenden Sie RGBA oder ändern Sie den Hex-Code in rgba. Es ist nicht erforderlich, ein Presodu-Element-CSS auszuführen .

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;

ODER

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