Slik skjuler du digitale bilder i websider
Cascading stilark kan hjelpe deg med å spare tid når du opprettholder sider på nettstedet ditt. Digitale bilder, for eksempel, vises sannsynligvis på noen av websidene dine. Hvis du noen gang trenger å hindre folk fra å se disse bildene, kan du bruke CSS til å skjule bildene ved å endre et enkelt ord i HTML-dokumentet. Du kan til og med få bildene på nytt umiddelbart ved å gjøre en rask oppdatering av dokumentets CSS-kode.
1.
Åpne et HTML-dokument som inneholder minst ett bilde, og finn dokumentets kroppsdel. Kroppsdelens bildetiketter vises som det som vises nedenfor:
En grunnleggende bildetikett som begynner med ordet "img." Koden i dette eksemplet refererer til et bilde med navnet "img / setting-up-new-business / 167 / how-hide-digital-images-web-pages-2.jpg."
2.
Endre et av bildetakene dine slik at det refererer til en CSS-klasse som heter "synlighet", som vist i følgende eksempel:
Hvis koden allerede har en klassereferanse, må du endre koden på en litt annen måte. Anta at taggen din vises som vist nedenfor:
Denne bildeteksten refererer allerede til en klasse som heter "myclass." Hvis din img-tag allerede refererer til en klasse, legger du til "synlighet" etter klassenavnet, som vist nedenfor:
3.
Lim inn følgende i hoveddelen av dokumentet:
Dette skaper synlighetsklassen og setter dens attributtverdier til "blokkere". Denne verdien gjør bildene synlige.
4.
Lagre dokumentet og åpne det i en hvilken som helst nettleser. Bildene dine vises som vanlige.
5.
Gå tilbake til redigeringsprogrammet og finn CSS-koden du legger til i dokumentets seksjon. Endre visningsattributtets verdi fra "blokk" til "ingen" og lagre dokumentet.
6.
Gå tilbake til nettleseren din og trykk "Ctrl-F5" for å slette midlertidig lagring. Når siden oppdateres, blir bildene dine borte.
Tips
- Legg til en klassehenvisning til hvert bilde du vil gjemme. Gi navnet på CSS-klassen alt du liker. Navnet er "synlighet" i dette eksemplet.
- Gjør bildene dine synlige igjen ved å endre ordet "none" til "block."