Hoe digitale afbeeldingen in webpagina's te verbergen

Cascading style sheets kunnen u helpen tijd te besparen bij het onderhouden van pagina's op uw website. Digitale afbeeldingen verschijnen bijvoorbeeld waarschijnlijk op sommige van uw webpagina's. Als u ooit wilt voorkomen dat mensen die afbeeldingen zien, kunt u CSS gebruiken om de afbeeldingen te verbergen door een enkel woord in uw HTML-document te wijzigen. U kunt de afbeeldingen zelfs onmiddellijk weer laten verschijnen door een snelle update van de CSS-code van uw document uit te voeren.

1.

Open een HTML-document dat ten minste één afbeelding bevat en zoek het hoofdgedeelte van het document. De afbeeldingslabels van het hoofdgedeelte lijken op de afbeelding hieronder:

Een eenvoudige afbeeldingstag die begint met het woord 'img'. De tag in dit voorbeeld verwijst naar een afbeelding met de naam "img / set-up-new-business / 167 / how-hide-digital-images-web-pages-2.jpg."

2.

Wijzig een van uw afbeeldingslabels zodat deze verwijst naar een CSS-klasse met de naam 'visibility', zoals in het volgende voorbeeld wordt getoond:

Als de tag al een klasseverwijzing bevat, moet u de tag op een iets andere manier wijzigen. Stel dat uw tag wordt weergegeven zoals hieronder weergegeven:

Die afbeeldingstag verwijst al naar een klasse met de naam "myclass". Als je img-tag al naar een klasse verwijst, zoals deze doet, voeg dan "visibility" toe na de klassenaam, zoals hieronder te zien:

3.

Plak het volgende in de kopsectie van uw document:

Hiermee wordt de zichtbaarheidsklasse gemaakt en wordt de weergaveattribuutwaarde ingesteld op 'blokkeren'. Die waarde maakt afbeeldingen zichtbaar.

4.

Sla het document op en open het in elke browser. Uw afbeeldingen worden normaal weergegeven.

5.

Keer terug naar je editor en zoek de CSS-code die je hebt toegevoegd aan het hoofdgedeelte van het document. Wijzig de waarde van het weergaveattribuut van "blokkeren" in "geen" en sla het document op.

6.

Keer terug naar uw browser en druk op "Ctrl-F5" om de tijdelijke opslag te wissen. Wanneer de pagina wordt vernieuwd, zijn uw afbeeldingen verdwenen.

Tips

  • Voeg een klasseverwijzing toe aan elke afbeelding die u wilt verbergen. Geef uw CSS-klasse een naam die u maar wilt. De naam is "zichtbaarheid" in dit voorbeeld.
  • Maak uw afbeeldingen weer zichtbaar door het woord 'geen' te wijzigen in 'blokkeren'.

Populaire Berichten