So verstecken Sie Bilder in CSS

CSS Hidden Pictures

CSS ist ein wesentlicher Bestandteil des Webdesigns. Es kann uns helfen, Webseiten zu verschönern, einschließlich Seitenlayout, Schriftarten, Farben usw. Darüber hinaus können wir CSS auch verwenden, um unnötige Elemente auszublenden und die Schönheit und Benutzererfahrung der Seite zu verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe von CSS Bilder ausblenden.

Im Webdesign sind Bilder sehr wichtige Elemente, aber manchmal müssen wir Bilder ausblenden. Beispielsweise möchten wir nicht zu viele Bilder auf Mobilgeräten laden, oder in manchen Fällen müssen wir Bilder vorübergehend ausblenden. Es ist sehr einfach, Bilder mit CSS auszublenden. Wir müssen lediglich eine Codezeile hinzufügen, um es zu vervollständigen.

Zuerst müssen wir einige Grundkenntnisse von CSS verstehen. In CSS können wir das Anzeigeattribut verwenden, um zu steuern, wie Elemente angezeigt werden. Es hat die folgenden Werte:

• none: Das Element wird nicht angezeigt, d. h. es ist vollständig ausgeblendet.
• Block: Das Element wird als Element auf Blockebene angezeigt und normalerweise zum Anzeigen von Titeln, Absätzen usw. verwendet.
• inline-block: Das Element wird als Inline-Blockelement angezeigt und kann zusammen mit anderen Elementen angeordnet werden.
• inline: Elemente werden als Inline-Elemente angezeigt und werden normalerweise zum Anzeigen von Links, Schaltflächen usw. verwendet.

Durch die Verwendung des display:none-Attributs können wir das Bild vollständig ausblenden. Beispielsweise der folgende Codeausschnitt:

img{

display:none;

}

Auf diese Weise werden alle img-Tags nicht mehr angezeigt. Wenn wir nur einige Bilder ausblenden möchten, können wir dieses Attribut zur angegebenen Klasse oder ID hinzufügen:

.hidden{

display:none;

}

< ;img src="img2.jpg" class="hidden" alt="Bild 2">

Das zweite und vierte Bild werden nicht mehr angezeigt.

Zusätzlich zur Verwendung des Anzeigeattributs können wir auch das Deckkraftattribut verwenden, um die Transparenz des Bildes zu steuern. Wenn Sie die Deckkraft auf 0 setzen, wird das Bild vollständig transparent, als ob es ausgeblendet wäre.

img{

opacity:0;

}

Diese Methode unterscheidet sich ein wenig von der Verwendung von display:none. Sie ändert nicht die Position und Größe des Bildes, sondern macht es nur transparent, sodass sie manchmal zum Erstellen eines Bildes verwendet werden kann das sieht nach versteckten Effekten aus.

Es ist zu beachten, dass bei Verwendung der oben genannten Methode zum Ausblenden von Bildern die Bilder zwar heruntergeladen, aber nicht angezeigt werden. Wenn Sie die Ladegeschwindigkeit von Webseiten optimieren möchten, verwenden Sie am besten JavaScript, um das Laden von Bildern zu verzögern Laden Sie sie, wenn Sie sie benötigen. Dies kann durch die Verwendung einiger vorgefertigter Bibliotheken wie lazyload.js, enthüllen.js usw. erreicht werden.

Kurz gesagt ist das Ausblenden von Bildern eine sehr praktische Technologie im Webdesign, die die Seite schöner machen und das Benutzererlebnis verbessern kann. Mithilfe der CSS-Eigenschaften display:none oder opacity können wir das Bild einfach ausblenden.

Das obige ist der detaillierte Inhalt vonSo verstecken Sie Bilder in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!