Sådan skjuler du digitale billeder i websider

Cascading stilark kan hjælpe dig med at spare tid, når du vedligeholder sider på din hjemmeside. Digitale billeder vises for eksempel sandsynligvis på nogle af dine websider. Hvis du nogensinde har brug for at forhindre folk i at se disse billeder, kan du bruge CSS til at skjule billederne ved at ændre et enkelt ord i dit HTML-dokument. Du kan endda få billederne til at dukke op igen ved at lave en hurtig opdatering til dit dokuments CSS-kode.

1.

Åbn et HTML-dokument, der indeholder mindst ét ​​billede, og find dokumentets kropsdel. Kropsafsnittets billedkoder vises som vist nedenfor:

Et grundlæggende billedmærke, der begynder med ordet "img." Tagget i dette eksempel refererer til et billede med navnet "img / setup-up-new-business / 167 / how-hide-digital-images-web-pages-2.jpg."

2.

Skift et af dine billedkoder, så det refererer til en CSS-klasse med navnet "synlighed" som vist i følgende eksempel:

Hvis mærket allerede har en klassereference, skal du ændre mærket på en lidt anderledes måde. Antag, at dit tag vises som vist nedenfor:

Denne billedmærke refererer allerede til en klasse med navnet "myclass." Hvis din img-tag allerede refererer til en klasse, tilføjes "synlighed" efter klassenavnet som vist nedenfor:

3.

Indsæt følgende i dokumentets hovedafsnit:

Dette skaber synlighedsklassen og sætter dens attributværdier til at "blokere". Denne værdi gør billeder synlige.

4.

Gem dokumentet og åbn det i enhver browser. Dine billeder vises som normalt.

5.

Gå tilbage til din editor og find den CSS-kode, du tilføjede til dokumentets hovedafsnit. Skift skærmattributets værdi fra "blok" til "none" og gem dokumentet.

6.

Gå tilbage til din browser og tryk på "Ctrl-F5" for at rydde den midlertidige lagring. Når siden opdateres, vil dine billeder være væk.

Tips

  • Tilføj en klassereference til hvert billede, du gerne vil skjule. Navngiv din CSS klasse alt hvad du vil. Dets navn er "synlighed" i dette eksempel.
  • Gør dine billeder synlige igen ved at ændre ordet "none" til "block."

Populære Indlæg