So dimmen Sie ein Bild in CSS

Das Abblenden eines Bildes macht es schwieriger zu sehen, aber das ist möglicherweise genau der Effekt, den Sie suchen. Ein schwaches Bild wird auf einer Webseite weniger hervorgehoben und zieht weniger Aufmerksamkeit auf als Objekte, die es umgeben. Sie könnten beispielsweise ein Bild eines sonnigen Strandes dimmen, um den Fokus eines Benutzers auf ein Menü unter dem Bild zu ziehen. Sie müssen nicht mehrere Bilder erstellen, um diesen Dimmeffekt zu erzeugen. Cascading Style Sheets oder CSS können diesen Trick mit wenigen Codezeilen ausführen.

CSS

CSS ist eine Sprache, mit der Site-Designer definieren, wie Objekte auf Webseiten aussehen. Diese Attribute, z. B. Farbe und Deckkraft, haben Werte wie im folgenden Beispiel gezeigt: .redBorder {border-color: red; Rahmenstil: fest;}

Dieser Code erstellt eine CSS-Klasse mit dem Namen redBorder. Wenn eines Ihrer HTML-Tags img auf diese Klasse verweist, sehen Website-Besucher einen durchgehenden roten Rahmen um das Bild, wenn Sie es auf Ihrer Webseite anzeigen. Der HTML-Code, der auf diese Klasse verweist, sieht folgendermaßen aus und der rote Rahmen kann entfernt werden, indem die Klassenreferenz in diesem img-Tag entfernt wird:

CSS-Deckkraft

Indem Sie die Deckkraft eines Bildes mit CSS ändern, wird das Bild dunkler. Mit dem folgenden Code wird eine Klasse mit der Bezeichnung Opacity40 erstellt, die Opazitätswerte von 40 Prozent definiert: .opacity40 {filter: alpha (Opacity = 40);

Deckkraft: 0, 4; }

Das Filterattribut der Klasse verwendet eine Deckkraftskala zwischen 0 und 100, und sein Deckkraftattribut verfügt über eine Deckkraftskala mit Werten zwischen 0 und 1. Durch die Verwendung beider Attribute wird sichergestellt, dass alle Browser die Deckkraft Ihres Bilds ändern können. Fügen Sie diese Klassenreferenz einem Bild hinzu, um es zu dimmen. Sie können auch eine Klasse mit dem Namen "Opacity100" erstellen und deren Werte so einstellen, dass die Opazität des Bilds 100 Prozent beträgt. Diese Klasse würde das Bild undurchsichtig machen.

Programmgesteuert dimmen

Ihre Webseite kann ein abgeblendetes Bild anzeigen, wenn Benutzer die Seite öffnen, oder Ihr Code kann dazu führen, dass das Bild nach dem Laden der Seite später dunkler wird. Damit das Bild anfänglich gedimmt wird, setzen Sie die Deckkraft wie zuvor beschrieben auf einen niedrigeren Wert. Um das Bild während der Ausführung der Anwendung zu verkleinern, ändern Sie den Namen der Klasse, die die Deckkraft des Bildes definiert, wie im folgenden Beispiel gezeigt: var imageObject = document.getElementById ("image1"); imageObject.className = "opacity40";

Dieser Code, der in einer JavaScript-Funktion angezeigt wird, erhält einen Verweis auf das Bild und ändert seinen Klassennamen in "Opacity40". Benutzer können auf eine Schaltfläche klicken, die die JavaScript-Funktion ausführt, oder der Code kann sie jederzeit aufrufen.

Überlegungen

Ihre JavaScript-Funktion benötigt den ID-Wert des Bildes, das Sie dimmen möchten, wenn Sie die Deckkraft dynamisch ändern möchten. Die Bild-ID in dem zuvor beschriebenen Beispiel lautet "image1". Wenn Sie mehrere Bilder dimmen möchten, geben Sie ihnen eindeutige ID-Werte und übergeben Sie sie an die Funktion, die die Deckkraftänderung vornimmt. Erstellen Sie beliebig viele CSS-Klassen, die unterschiedliche Deckkraftstufen definieren. Sie können ein Bild dann beliebig dimmen, indem Sie die Klassenreferenz in der JavaScript-Funktion ändern.