Wie verstecke ich Bilder in CSS? Kurze Analyse zweier Methoden

Im Webdesign ist das Ausblenden von Bildern eine sehr verbreitete Technik. Das Ausblenden von Bildern kann Webseiten schöner und aufgeräumter machen, außerdem kann es die Ladezeit von Webseiten verkürzen und das Zugriffserlebnis der Benutzer verbessern. Derzeit ist die Verwendung von CSS-Stylesheets zum Ausblenden von Bildern zu einer der Standardtechnologien im Webdesign geworden. In diesem Artikel zeigen wir Ihnen, wie Sie Bilder mithilfe von CSS-Stylesheets ausblenden.

Zuerst müssen wir verstehen, was ein CSS-Stylesheet ist. CSS ist die Abkürzung für Cascading Style Sheets und der chinesische Name lautet Cascading Style Sheets. CSS-Stylesheets werden verwendet, um den Stil und das Layout von Webseiten zu steuern, einschließlich Schriftarten, Farben, Layout, Bildern und mehr. Um CSS-Stylesheets zum Ausblenden von Bildern zu verwenden, müssen Sie die Anzeigeeigenschaft und die Sichtbarkeitseigenschaft von CSS verwenden.

(1) Verwenden Sie display:none, um Bilder auszublenden.

display:none ist eines der am häufigsten verwendeten Attribute zum Ausblenden von Elementen in CSS-Stylesheets. Wenn wir die Anzeigeeigenschaft eines Elements auf „none“ setzen, wird das Element nicht angezeigt. Hier ist ein einfaches Beispiel:

HTML-Code:

<img src="https://example.com/image.png">

CSS-Code:

img {
    display: none;
}

Im obigen Code haben wir alle img-Tags zusammengefasst Das Anzeigeattribut ist auf „Keine“ gesetzt. Auf diese Weise werden alle Bilder auf der Webseite ausgeblendet. Wenn wir ein Bild anzeigen müssen, müssen wir nur den Anzeigeattributwert des IMG-Tags in „Block“ oder „Inline-Block“ ändern, um es anzuzeigen.

(2) Verwenden Sie Visibility:hidden, um Bilder auszublenden.

Im Gegensatz zu Display:none kann Visibility:hidden Elemente ausblenden, aber die Elemente nehmen weiterhin den Platz auf der Webseite ein. Elemente mit „visibility:hidden“ behalten weiterhin einen Platz auf der Seite, werden aber nicht mehr angezeigt. Hier ist ein einfaches Beispiel:

HTML-Code:

<img src="https://example.com/image.png">

CSS-Code:

img {
    visibility: hidden;
}

Im obigen Code haben wir alle img-Tags zusammengefasst Die Sichtbarkeitseigenschaft ist auf „verborgen“ gesetzt. Auf diese Weise werden alle Bilder auf der Webseite ausgeblendet, sie nehmen jedoch weiterhin den ursprünglichen Platz ein. Wenn wir ein Bild anzeigen müssen, müssen wir nur den Sichtbarkeitsattributwert des img-Tags in „sichtbar“ ändern, um es anzuzeigen.

Zusammenfassung

Im Webdesign ist das Ausblenden von Bildern eine sehr verbreitete Technik. Eine der gebräuchlichsten Methoden ist die Verwendung von CSS-Stylesheets zum Ausblenden von Bildern. Wir können Bilder mit dem Attribut display:none vollständig ausblenden, oder wir können Bilder ausblenden, aber ihren Platz mit dem Attribut „visibility:hidden“ behalten. Durch die Verwendung dieser Attribute können wir die Ladezeit der Webseite verkürzen, das Zugriffserlebnis des Benutzers verbessern und die Webseite schöner und aufgeräumter gestalten.

Das obige ist der detaillierte Inhalt vonWie verstecke ich Bilder in CSS? Kurze Analyse zweier Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!