So blenden Sie digitale Bilder in Webseiten aus

Durch das Kaskadieren von Stylesheets können Sie beim Verwalten von Seiten Ihrer Website Zeit sparen. Beispielsweise werden digitale Bilder möglicherweise auf einigen Ihrer Webseiten angezeigt. Wenn Sie jemals verhindern müssen, dass Personen diese Bilder sehen, können Sie sie mit CSS ausblenden, indem Sie ein einzelnes Wort in Ihrem HTML-Dokument ändern. Sie können sogar Bilder sofort wieder anzeigen lassen, indem Sie den CSS-Code Ihres Dokuments schnell aktualisieren.

1

Öffnen Sie ein HTML-Dokument, das mindestens ein Bild enthält, und suchen Sie den Hauptteil des Dokuments. Die Bild-Tags des Hauptteils sehen ähnlich wie die unten abgebildete aus:

Ein einfaches Image-Tag, das mit dem Wort "img." Beginnt. Das Tag in diesem Beispiel verweist auf ein Bild mit dem Namen "img / setup-new-business / 167 / how-hide-digital-images-web-pages-2.jpg".

2

Ändern Sie eines Ihrer Image-Tags, sodass es auf eine CSS-Klasse mit dem Namen "Sichtbarkeit" verweist, wie im folgenden Beispiel gezeigt:

Wenn das Tag bereits über eine Klassenreferenz verfügt, müssen Sie das Tag etwas anders ändern. Angenommen, Ihr Tag wird wie folgt angezeigt:

Dieses Image-Tag verweist bereits auf eine Klasse mit dem Namen „myclass“. Wenn Ihr img-Tag bereits auf eine Klasse verweist, hängen Sie wie hier „Sichtbarkeit“ an den Klassennamen an.

3.

Fügen Sie Folgendes in den Kopfbereich Ihres Dokuments ein:

Dadurch wird die Sichtbarkeitsklasse erstellt und der Anzeigeattributwert auf "Blockieren" festgelegt. Dieser Wert macht Bilder sichtbar.

4

Speichern Sie das Dokument und öffnen Sie es in einem beliebigen Browser. Ihre Bilder werden normal angezeigt.

5

Kehren Sie zu Ihrem Editor zurück und suchen Sie den CSS-Code, den Sie im Kopfbereich des Dokuments hinzugefügt haben. Ändern Sie den Wert des Anzeigeattributs von "block" in "none" und speichern Sie das Dokument.

6

Kehren Sie zu Ihrem Browser zurück und drücken Sie "Strg-F5", um den temporären Speicher zu löschen. Wenn die Seite aktualisiert wird, sind Ihre Bilder verschwunden.

Tipps

  • Fügen Sie jedem Bild, das Sie ausblenden möchten, eine Klassenreferenz hinzu. Benennen Sie Ihre CSS-Klasse nach Belieben. In diesem Beispiel heißt es "Sichtbarkeit".
  • Machen Sie Ihre Bilder wieder sichtbar, indem Sie das Wort "none" in "blockieren" ändern.

Beliebte Beiträge