Heutzutage müssen Sie sich wirklich keine Sorgen mehr über schwierig zu handhabende Browserübergänge bei der Deckkraft machen. Sie verwenden einfach die Eigenschaft opacity, so:
.thing {
opacity: 0.5;
}0 ist komplett transparent (wird nicht angezeigt, wie visibility: hidden;) und 1 ist komplett opak (Standard). Alles dazwischen ist teilweise transparent.
Aus historischen Gründen haben wir es früher so gemacht
.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */
filter: alpha(opacity=50);
/* Netscape */
-moz-opacity: 0.5;
/* Safari 1.x */
-khtml-opacity: 0.5;
/* Good browsers */
opacity: 0.5;
}
Habe den IE8-Deckkraft-Aufruhr tatsächlich verpasst. Danke fürs Einbeziehen!
Ja. Das wusste ich auch nicht. Das einzige Problem, das ich mit diesem Snippet habe, ist, dass es kein gültiges CSS ist.
Trotzdem werde ich es benutzen.
display:inline-block hinzufügen behebt das. xD
Che Guevara Killer!
@Amr SubZero
Ich habe nur ein Konto erstellt, um Ihnen zu danken. Dies behebt das Problem mit IE, wo ein Element die Opazität nicht an seine Kinder weitergab.
Nützlich :) Danke!
Aufmerksamkeit – Reihenfolge
.yourselector {
background:#000;
opacity: .75; /* Standard: ff ab 1.5, opera, safari */
-ms-filter: “alpha(opacity=75)”; /* ie 8 */
filter: alpha(opacity=75); /* ie kleiner 7 */
-khtml-opacity: .75; /* safari 1.x */
-moz-opacity: .75; /* ff kleiner 1.5, netscape */
}
Wenn Sie möchten, dass die Deckkraft auch im IE8 im Emulationsmodus von IE7 funktioniert, sollte die Reihenfolge lauten:
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”; // zuerst
filter: alpha(opacity=50); // zweitens
Wenn Sie diese Reihenfolge nicht verwenden, wendet IE8 im IE7-Emulationsmodus die Deckkraft nicht an, obwohl IE8 und natives IE7 dies tun.
Wie sieht es mit der Beibehaltung des normalen Textes innerhalb der Ebene aus?
Ja! Ich frage mich auch, wie das geht..
Wenn Sie einem übergeordneten Container eine Opazität von weniger als 100% zuweisen, sind auch alle seine untergeordneten Elemente weniger als 100% opak, nicht weil es kaskadiert, sondern weil der Elternteil gedimmt ist. Wenn der Elternteil auf 75% gedimmt ist, wird das Kind, selbst wenn ihm 100% Opazität zugewiesen werden, nur 100% von 75% sein, also 75%.
Was ich mache, ist einfach ein halbtransparentes PNG als Hintergrundbild für den Elternteil zu verwenden, und dann können die Kinder volle Opazität haben.
inb4 IE6 rendert keine 24-Bit-PNGs... Schluss mit IE6, ich habe aufgehört, mich vor IE6 zu verbeugen und jeden zu ermöglichen, der es immer noch benutzt. Die Verwendung eines halbtransparenten PNGs wird die Website nicht kaputt machen, aber es wird sicherlich die Optik beeinträchtigen, was umso mehr ein Grund ist, warum die Leute aufrüsten sollten.
Verwenden Sie rgba
Sie müssen verhindern, dass der Stil kaskadiert... Sie müssen Ihren Text in ein Element mit einer Opazität von 100 einschließen.
Ich habe mich geirrt: https://css-tricks.de/non-transparent-elements-inside-transparent-elements/
Ich benutze diesen Schnipsel öfter als jeden anderen auf der Seite. Danke! =D
Ist das für IE9 in Ordnung?
ie9 unterstützt „opacity: 0.5;“ wie chrome und firefox
Danke für das aktualisierte Coding^^
Fantastisches „Submit Comment Formular“. Glückwunsch, das Beste, was ich jemals jahrelang im Internet gefunden habe…
Aber ich habe eine Frage…
Warum fragt ihr alle „Webmaster“ nach E-Mail, hum??? Wenn ich eine Antwort will, gebe ich einfach meine E-Mail ein oder kontaktiere Sie besser. Wenn nicht, werde ich einfach LÜGEN! Und eine solche verwenden: [email protected]
Nehmen Sie diese „Pflichtfelder“ weg. Ich hasse diese Massenstandardisierung und Globalisierung, es ist so kitschig und so vorhersehbar, es ist ein falscher Satz, um daraus ein mystifiziertes Konzept zu evozieren.
Webmaster fragen nach E-Mails, um Spam zu identifizieren und Benutzer eindeutig zu identifizieren. Wenn Sie Ihre E-Mail nicht eingeben möchten, dann vertrauen Sie darauf, dass Ihre Beiträge als Spam entfernt werden und dass Sie wirklich nicht beitragen können, weil Sie nichts weiter sind als ein paar „asdf“.
Ich habe gelacht, als ich das „gute Browser“-Ding gelesen habe
Das, mein Freund, liegt daran, dass du ein Idiot bist
gute Informationen, sehr hilfreich. Danke..
@asdasdasd: Sie sollten dieses fantastische Einreichungsformular in IE8 ansehen.
Ich habe das auf einem PNG ausprobiert, aber dann hat es einen schwarzen Rand darum bekommen.
Danke, das ist eine große Hilfe!
Wie Chris hier schrieb: https://css-tricks.de/64-css-transparency-settings-for-all-broswers/
Verwenden Sie die folgendenAnno 2011
Mein gesamter Text ist unsichtbar, weil er vollständig transparent vor einem halbtransparenten Hintergrund sein soll... aber ich bekomme die Deckkraft in IE 7/8 nicht zum Laufen. Er ist in ein P verschachtelt, das war's.
Ich habe zoom:1 & Hilbrands Fix für Opazität ausprobiert und bekomme es immer noch nicht zum Laufen. Mache ich etwas falsch oder kennt jemand einen Code-Schnipsel, um das zu beheben?
Musste über den Verweis auf „Gute Browser“ lachen – Ich bin froh, dass so etwas kein langer Artikel sein muss, da alle Antworten in Ihrem Snippet enthalten sind, was großartig ist. :)
Danke, das hat mir Stunden erspart!
Gute Browser, da haben Sie Recht!
„es ist so kitschig und so vorhersehbar, es ist ein falscher Satz, um daraus ein mystifiziertes Konzept zu evozieren.“ Sie hätten Schriftsteller werden sollen! Haha.
Der Kommentar /* Gute Browser */ hat mich zum Lachen gebracht!
Danke für den Beitrag, ich benutze diesen Code-Schnipsel ständig beim Designen :)
Ich muss nur Danke sagen für das hier. Ich verweise ständig darauf!
Das funktioniert bei mir großartig, außer bei IE6 & IE7. Es stellt sich heraus, dass Sie das „A“ und „O“ hier groß schreiben müssen
filter: Alpha(Opacity=50);
Prost!
Mein Fehler! mein letzter Beitrag war falsch. Die Verwendung von Kleinbuchstaben funktioniert in IE6 & IE7 korrekt
filter: alpha(opacity=50);
Nochmals vielen Dank!
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
Das funktioniert nicht in IE8
Was muss ich tun, damit es in IE8 & 7 funktioniert?
-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
Das funktioniert nicht in IE8
Was muss ich tun, damit es in IE8 & 7 funktioniert?
Hallo,
Ich habe CSS Pie für abgerundete Ecken verwendet, aber ein Problem ist, dass ich für die Deckkraft den obigen Code verwendet habe, aber die Deckkraft nicht sehen kann.
Wenn ich das CSS Pie-Verhalten entferne, sehe ich die Deckkraft in IE8.
Ist es problematisch, CSS Pie einzuschließen? Ich finde keine Lösung, bitte helfen Sie.
Danke
Haben Sie all diese Snippets als dynamische WordPress-Seiten erstellt, im Gegensatz zu WordPress-Posts?
Nein, eigentlich habe ich diese Snippets in meine HTML-Seite und CSS eingefügt.
Hallo
Jedes Mal, wenn ich einen CSS-Stil entwerfen muss, komme ich hierher. Vielen Dank, Chris
Wie wäre es mit -webkit-opacity? Ist das für Google Chrome?
Gibt es ein Update dazu?
Es gibt ein Problem bei der Verwendung der opacity-Eigenschaft und images:hover. Dies führt dazu, dass die Bilder aus einem seltsamen Grund um ein Pixel „springen“. Der folgende Fix funktioniert jedoch (ich weiß nicht, warum)
box-shadow: #000 0em 0em 0em;
Für weitere Informationen: http://stackoverflow.com/questions/9581071/jquery-fading-images-with-html-resize-makes-them-move-sometimes
Gute Arbeit, Herr.
Hilft mir sehr, besonders bei IE-Problemen
Es gibt einen besseren Weg gefunden
Hintergrundfarbe: transparent;
background-color: rgba(0,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000);
-ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=#30000000,endColorstr=#30000000)”;
Wie misst man die Hintergrundgröße in IE8, wenn ms-filter nicht funktioniert?
Entschuldigung, falscher Beitrag, das ist nur für transparente Hintergründe, funktioniert aber ohne Isolierung von IE7/8-Dateien.
Leider habe ich beim Verwenden von Opazität einen schwarzen Rand um Buttons in IE7.
Hat jemand eine Lösung dafür?
Danke, perfekt :D
Vielen Dank, Chris. Das hat mir sehr geholfen :)
Für IE7 müssen Sie wirklich sicherstellen, dass einige dieser zusätzlichen Elemente vorhanden sind…
position: relative;
z-index: 99;
zoom: 1;
overflow: visible;
Danke. Es war nützlich.
War wirklich hilfreich
Hmm. Das funktioniert nur, wenn ich die Anführungszeichen um jeden Filter weglasse.
Hallo, IE9-Kompatibilitätsmodus, die Deckkraft funktioniert nicht. Gibt es dafür einen speziellen Code…
Warum sollten Sie den Kompatibilitätsmodus in IE9 verwenden? Einfache Benutzer verwenden das nicht. Testen Sie auf echtem IE8, wenn Sie IE8-Kompatibilität wünschen.
Immer noch lachend über den Kommentar /* Gute Browser */
. . . aber das ist die Wahrheit :)
Dieser Code funktioniert nicht in IE8. Kann mir jemand die perfekte Lösung nennen. Danke
https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
„Firefox 3.5 und höher unterstützen -moz-opacity nicht“
Der beste Ort, um CSS-Tricks zu finden. IE8?! Was haben sie sich dabei gedacht, MS, ehrlich?
Danke dafür! Ich liebe es, dass IE8 immer noch unterstützt wird! ;)
brauche eine Lösung für ie8 :|
Können wir diese Seite bitte aktualisieren oder aus dem Internet entfernen? Dieser Mist ist uralt.
Ich werde es aktualisieren, um es klarer zu gestalten und den modernsten, einfachsten Weg vorschlagen.
Hallo Chris, Sie haben
filter: alpha(opacity=50);unter IE 5-7 aufgeführt, aber es funktioniert in IE8 einwandfrei, keine Notwendigkeit für diese komplizierte Codezeile mit DirectX... für IE8.Fehlt mir etwas? Ich teste dies tatsächlich auf IE11, das IE8 emuliert.
Danke
Hören Sie auf, alte Browser zu unterstützen.
Machen Sie ein riesiges Benachrichtigungsfenster, wenn jemand versucht, über einen davon auf die Website zuzugreifen, und informieren Sie ihn, dass er einen Dinosaurier-alten Webbrowser verwendet und ihn aktualisieren sollte. Selbst Microsoft versucht, IE loszuwerden!
Es ist so lächerlich für IE 8, keine Opazität zu unterstützen, nicht einmal filter:alpha(opacity=56). Und warum muss man -ms-filter:”progid:DXImageTransform…bla.bla.bla”?
Silviu hat Recht… filter: alpha(opacity=50); funktioniert in IE8 einwandfrei
Hallo,
Opazität funktioniert in IE11 und Chrome einwandfrei, aber in IE11 – ENTERPRISE MODE – schlägt fehl. Bitte raten Sie, ob jemand Opazität für IE im Enterprise-Modus ausprobiert hat und das Problem ist, dass der Hintergrund komplett grau ist, was in anderen Browsern einwandfrei funktioniert.
Habe {opacity: .3; filter: Alpha(Opacity=30)} verwendet. Bitte teilen Sie eine Lösung mit.
Wozu dient
/* Safari 1.x */
-khtml-opacity: 0.5;
?
Danke
Hallo! Das ist das erforderliche Präfix, wenn Sie möchten, dass Safari Version 1 Opazität unterstützt. Safari unterstützte diese Funktion erst später, daher ist es für die Funktion in dieser Version erforderlich, das Präfix für die Eigenschaft zu verwenden.
Okay, danke Sir Geoff Graham