CSS3 Opazität Wie man es effektiv benutzt

Machen Sie Ihre Hintergründe transparent

Eine der Aufgaben, die Sie im Druckdesign problemlos ausführen können, jedoch nicht im Web, ist das Überlagern von Text auf einem Bild oder einem farbigen Hintergrund. Ändern Sie die Transparenz dieses Bildes, sodass der Text in den Hintergrund übergeht. In CSS3 gibt es jedoch eine Eigenschaft, mit der Sie die Deckkraft Ihrer Elemente so ändern können, dass sie ein- und ausgeblendet werden:

Opazität

Verwendung der Opacity-Eigenschaft

Die Opazitätseigenschaft nimmt einen Transparenzwert von 0,0 bis 1,0 an. 0.0 ist vollständig transparent - alles unter diesem Element wird vollständig durchscheinen. 1.0 ist vollständig undurchsichtig - nichts unter dem Element wird durchscheinen.

Um ein Element auf 50% transparent zu setzen, schreiben Sie:

Opazität: 0,5;

Sehen Sie einige Beispiele für Deckkraft in Aktion

Seien Sie sicher, in älteren Browsern zu testen

Alle neuen Browser unterstützen CSS3, einige ältere jedoch nicht. Weder IE 6 noch 7 unterstützen die CSS3-Opazitätseigenschaft. Aber du hast kein Pech. Stattdessen unterstützt der IE einen Nur-Microsoft-Eigenschafts-Alpha-Filter.

Alphafilter im IE akzeptieren Werte von 0 (vollständig transparent) bis 100 (vollständig undurchsichtig). Um Ihre Transparenz im IE zu erhalten, sollten Sie Ihre Deckkraft mit 100 multiplizieren und Ihren Stilen einen Alpha-Filter hinzufügen:

Filter: Alpha (Opazität = 50);

Sehen Sie den Alpha-Filter in Aktion (nur IE)

Und Verwenden Sie Browser-Präfixe

Du solltest das benutzen

-moz- und -webkit- Präfixe, damit auch ältere Versionen von Mozilla- und Webkit-Browsern dies unterstützen:
-Webkit-Opazität: 0,5;
-Moz-Opazität: 0,5;
Opazität: 0,5;

Stellen Sie die Browserpräfixe immer an die erste und die gültige CSS3-Eigenschaft an die letzte Stelle.

Testen Sie die Browserpräfixe in älteren Mozilla- und Webkit-Browsern.

Sie können Bilder auch transparent machen

Stellen Sie die Deckkraft auf das Bild selbst ein und es wird in den Hintergrund eingeblendet. Dies ist sehr nützlich für Hintergrundbilder.

Wenn Sie ein Ankertag hinzufügen, können Sie Hover-Effekte erstellen, indem Sie die Deckkraft des Bildes ändern.

a: hover img {
Filter: Alpha (Deckkraft = 50)
filter: progid: DXImageTransform.Microsoft.Alpha (Opazität = 50)
-Moz-Opazität: 0,5;
-Webkit-Opazität: 0,5;
Opazität: 0,5;
}

Fügen Sie Ihren Bildern Text hinzu

Mit der Deckkraft können Sie Text über einem Bild platzieren und das Bild an der Stelle ausblenden, an der sich dieser Text befindet.

Diese Technik ist etwas knifflig, da Sie das Bild nicht einfach ausblenden können, da das gesamte Bild ausgeblendet wird. Das Textfeld kann nicht ausgeblendet werden, da der Text dort ebenfalls ausgeblendet wird.

  1. Zuerst erstellen Sie einen Container DIV und platzieren Ihr Bild darin:
  2. Folgen Sie dem Bild mit einem leeren DIV - das machen Sie transparent.
  3. Das Letzte, was Sie in Ihren HTML-Code einfügen, ist der DIV mit Ihrem Text:
  4. Das ist mein Hund Shasta. Ist er nicht süß?
    1. Sie gestalten es mit CSS-Positionierung, um den Text über dem Bild zu platzieren. Ich habe meinen Text auf der linken Seite platziert, aber Sie können ihn auf der rechten Seite platzieren, indem Sie die beiden linken ändern: 0; Eigenschaften nach rechts: 0 ;. #image {position: relative;
    2. Breite: 170px;
    3. Höhe: 128px;
    4. Rand: 0;
    5. }
    6. #text {
    7. Position: absolut;
    8. oben: 0;
    9. links: 0;
    10. Breite: 60px;
    11. Höhe: 118px;
    12. Hintergrund: #fff;
    13. Polsterung: 5px;
    14. }
    15. #text {
    16. Filter: Alpha (Opazität = 70);
    17. filter: progid: DXImageTransform.Microsoft.Alpha (Opazität = 70);
    18. -moz-Opazität: 0,70;
    19. Opazität: 0,7;
    20. }
    21. #Wörter {
    22. Position: absolut;
    23. oben: 0;
    24. links: 0;
    25. Breite: 60px;
    26. Höhe: 118px;
    27. Hintergrund: transparent;
    28. Polsterung: 5px;
    29. }

Sehen Sie, wie es aussieht