it-swarm.com.de

Deckkraft des div-Hintergrunds, ohne das enthaltene Element in IE 8?

Ich möchte die Deckkraft des Hintergrunds von div festlegen, ohne das enthaltene Element in IE= zu beeinflussen Ich verwende dynamische Deckkraft und der Farbadministrator kann das ändern

Ich habe das benutzt, aber nicht in IE 8

#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 opacity -Stil 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 den Wert des Alphakanals darstellt, der genauso funktioniert wie der Wert von opacity.

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, die aber mittlerweile alle sehr alt sind. Alle derzeit verwendeten Browser außer IE6/7/8 funktionieren mit RGBA-Farben.

Die gute Nachricht ist, dass Sie IE) mit einem Hack namens CSS3Pie zwingen können, auch damit zu arbeiten. CSS3Pie fügt älteren Versionen von eine Reihe moderner CSS3-Funktionen hinzu IE, einschließlich RGBA-Hintergrundfarben.

Um CSS3Pie für Hintergründe zu verwenden, müssen Sie ein bestimmtes -pie-background -Deklaration für Ihr CSS sowie den PIE behavior -Stil, sodass Ihr Stylesheet am Ende so aussieht:

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

Ich hoffe, das hilft.

[BEARBEITEN]

Für das, was es wert ist, können Sie, wie andere bereits erwähnt haben, den IE-Stil filter mit dem Schlüsselwort gradient verwenden. Die CSS3Pie-Lösung verwendet tatsächlich dieselbe Technik hinter den Kulissen, jedoch müssen Sie nicht mehr direkt mit den IE-Filtern herumspielen, sodass Ihre Stylesheets viel sauberer sind. (Es fügt auch eine ganze Reihe anderer Nizza-Funktionen hinzu, aber das ist für diese Diskussion nicht relevant.)

219
Spudley

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 erstellen http://kimili.com/journal/rgba-hsla-css-generator-for-internet-Explorer/

21
sandeep

opacity für übergeordnetes Element legt es für den gesamten Sub-DOM-Baum fest

Sie können nicht wirklich die Deckkraft für ein bestimmtes Element festlegen, das nicht auch für Nachkommen gelten würde. So funktioniert CSS opacity leider nicht.

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 musst du transparent position: absolute/relative setzen, damit sein inhaltliches Geschwisterchen darüber gerendert wird.

rgba kann Hintergrundtransparenz für farbige Hintergründe erstellen

Die Farbeinstellung rgba für das Element background-color funktioniert natürlich, Sie können jedoch nur die Farbe als Hintergrund verwenden. Keine Bilder, fürchte ich. Sie können natürlich CSS3-Verläufe verwenden, wenn Sie in rgba Stoppfarben für Verläufe angeben. Das funktioniert auch.

Beachten Sie jedoch, dass rgba mö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 ein separates div mit den folgenden Formaten 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 z-index Haben. Aber diese beiden Elemente sind nicht in Bezug auf Geschwister oder irgendetwas verwandt. Sie werden nur so angezeigt, wie sie sein sollten. Einer über den anderen.

7
Robert Koritnik

Stellen Sie den Z-Index für das enthaltene Element höher ein.

2
maple_shaft

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

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 alle untergeordneten Divs aus, wenn Sie die Opazitätsfunktion mit anderen als absoluten Positionen verwenden. Also eine andere Möglichkeit, es zu erreichen, Divs nicht ineinander zu setzen und dann die absolute Position für die Divs zu verwenden. Verwenden Sie keine Hintergrundfarbe für das obere Div.