Zu bestimmten Zeiten oder an besonderen Tagen müssen wir die Website im Schwarz-Weiß-Stil anzeigen.
Um das Aussehen Ihrer Website mithilfe von Schwarz-Weiß-Effekten in CSS zu ändern, können Sie einen Graustufenfilter verwenden. Hier ist ein einfaches Beispiel:
Codebeispiel:
body {
filter: grayscale(100%); /* 将整个页面转为黑白 */
}
Wenn Sie den obigen Code auf bodydas Element in Ihrer CSS-Datei anwenden, wird die gesamte Website in Schwarzweiß umgewandelt. Sie können die oben genannten Stile auch auf andere spezifische Elemente oder Klassen anwenden, um den Schwarz-Weiß-Effekt lokal anzuwenden.
Wenn Sie einen Schwarz-Weiß-Effekt nur auf einen bestimmten Bereich oder ein bestimmtes Element anwenden möchten, können Sie das entsprechende Element über die Auswahl angeben und einen Graustufenfilterstil anwenden. Hier ist ein Beispiel:
.header {
filter: grayscale(100%); /* 将 .header 区域转为黑白 */
}
Im obigen Beispiel .headerwird ein Klassenselektor verwendet, um einen bestimmten Bereich auszuwählen und seinen Inhalt in Schwarzweiß umzuwandeln.
Bitte beachten Sie, dass ein Graustufenfilter nur ein visueller Effekt ist und weder die Farbe noch den Stil Ihres Website-Inhalts verändert. Wenn Sie also Ihre Website in Schwarzweiß umwandeln müssen, stellen Sie sicher, dass Ihre Designelemente und Bilder auch im Schwarzweißmodus noch lesbar und lesbar sind.