Hur att dölja digitala bilder i webbsidor
Cascading stilark kan hjälpa dig att spara tid när du underhåller sidor på din webbplats. Digitala bilder, till exempel, visas förmodligen på några av dina webbsidor. Om du någonsin behöver förhindra att människor ser bilderna kan du använda CSS för att dölja bilderna genom att ändra ett enda ord i ditt HTML-dokument. Du kan till och med göra bilderna återkomna direkt genom att snabbt uppdatera dokumentets CSS-kod.
1.
Öppna ett HTML-dokument som innehåller minst en bild och leta efter dokumentets kroppsdel. Kroppsavsnittets bildtaggar kommer att likna den som visas nedan:
En grundläggande bildtagg som börjar med ordet "img." Taggen i det här exemplet refererar till en bild med namnet "img / setup-up-new-business / 167 / hide-digital-images-web-pages-2.jpg."
2.
Ändra en av dina bildkoder så att den refererar till en CSS-klass som heter "synlighet", som visas i följande exempel:
Om taggen redan har en klassreferens behöver du byta taggen på ett annorlunda sätt. Antag att din tagg visas som visas nedan:
Den här bildtaggen refererar redan till en klass med namnet "myclass". Om din img-tagg redan refererar till en klass, så lägger du till "synlighet" efter klassnamnet, se nedan:
3.
Klistra in följande i huvuddelen av dokumentet:
Detta skapar synlighetsklassen och ställer in sitt visningsattributvärde till "block". Det värdet gör bilderna synliga.
4.
Spara dokumentet och öppna det i en webbläsare. Dina bilder visas som vanliga.
5.
Gå tillbaka till din redigerare och leta reda på den CSS-kod du lagt till i huvuddelen av dokumentet. Ändra visningsattributets värde från "block" till "none" och spara dokumentet.
6.
Återgå till din webbläsare och tryck på "Ctrl-F5" för att rensa det tillfälliga lagret. När sidan uppdateras kommer dina bilder att vara borta.
tips
- Lägg till en klassreferens till varje bild som du vill gömma. Nämn din CSS-klass vad som helst du vill. Dess namn är "synlighet" i det här exemplet.
- Gör dina bilder synliga igen genom att ändra ordet "none" till "block."