Mange mennesker bruger CSS for at justere tekst, ændre skrifttype, farve, størrelse og mere. Men en ting, som mange ofte glemmer, er, at du også kan bruge CSS med billeder.
Ændring af billedet selv
CSS giver dig mulighed for at justere, hvordan billedet vises på siden. Dette kan være virkelig nyttigt for at holde dine sider konsistente. Ved at indstille stilarter på alle billeder skaber du et standard look til dine billeder. Nogle af de ting, du kan gøre:
- Tilføj en kant eller omrids omkring billederne
- Fjern den farvede kant omkring sammenkædede billeder
- Justering af billedernes bredde og / eller højde
- Tilføj en skygge
- Drej billedet
- Skift typografier når billedet holdes over
At give dit billede en kant er et godt sted at starte. Men du bør overveje mere end bare grænsen - tænk over hele kanten af dit billede og juster margenerne og polstring såvel. Et billede med en tynd sort kant ser flot ud, men at tilføje noget polstring mellem kanten og billedet kan se endnu bedre ud.
Det er en god idé at
link altid ikke-dekorative billeder, når det er muligt. Men når du gør det, skal du huske, at de fleste browsere tilføjer en farvet kant omkring billedet. Selvom du bruger ovenstående kode til at ændre grænsen, tilsidesætter linket det, medmindre du også fjerner eller ændrer grænsen på linket. For at gøre dette skal du bruge en CSS-underordnet regel til at fjerne eller ændre grænsen omkring sammenkædede billeder:Du kan også bruge CSS til at ændre eller indstille højden og bredden på dine billeder. Selvom det ikke er en god ide at bruge browseren til at justere billedstørrelser på grund af downloadhastigheder, bliver de meget bedre til at ændre størrelsen på billeder, så de stadig ser godt ud. Og med CSS kan du indstille dine billeder til at have en standard bredde eller højde eller endda indstille dimensionerne til at være i forhold til containeren.
Husk, at når du ændrer størrelsen på billeder for at få de bedste resultater, skal du kun ændre størrelsen på en dimension - højden eller bredden. Dette vil sikre, at billedet bevarer dets billedformat, og så ser det ikke underligt ud. Indstil den anden værdi til auto eller lad det være ude for at fortælle browseren at holde billedformatet konstant.
CSS3 tilbyder en løsning på dette problem med de nye egenskaber objekt-fit og objekt-position. Med disse egenskaber vil du være i stand til at definere den nøjagtige billedhøjde og bredde og hvordan billedformatet skal håndteres. Dette kan skabe brevbokseffekter omkring dine billeder eller beskæring for at få billedet til at passe i den krævede størrelse.
Der er andre CSS3-egenskaber, der understøttes godt i de fleste browsere, som du også kan bruge til at ændre dine billeder. Ting som dropskygger, afrundede hjørner og transformationer for at rotere, skæve eller flytte dine billeder fungerer lige nu i de fleste moderne browsere. Du kan derefter bruge CSS-overgange til at få billederne til at ændre sig, når de holder musemarkøren over eller klikker på eller lige efter en periode.
Brug af billeder som baggrund
CSS gør det nemt at skabe smarte baggrunde med dine billeder. Du kan tilføj baggrunde til hele siden eller bare et bestemt element. Det er nemt at oprette et baggrundsbillede på siden med baggrundsbillede ejendom:
Skift legeme vælger til et bestemt element på siden for kun at sætte baggrunden på et element.
En anden sjov ting, du kan gøre med billeder, er at oprette et baggrundsbillede, der ikke ruller med resten af siden - som et vandmærke. Du bruger bare stilen baggrundsvedhæftning: fast; sammen med dit baggrundsbillede. Andre muligheder for dine baggrunde inkluderer at få dem til at flise lige vandret eller lodret ved hjælp af baggrund-gentagelse ejendom. Skrive baggrunds-gentagelse: gentag-x; for at flise billedet vandret og baggrunds-gentagelse: gentag-y; at flise lodret. Og du kan placere dit baggrundsbillede med baggrund-position ejendom.
Og CSS3 tilføjer også flere stilarter til dine baggrunde. Du kan strække dine billeder, så de passer til enhver størrelsesbaggrund, eller indstille baggrundsbilledet til at skalere med vinduesstørrelsen. Du kan ændre positionen og derefter klippe baggrundsbilledet. Men en af de bedste ting ved CSS3 er, at du nu kan lag flere baggrundsbilleder for at skabe endnu mere indviklede effekter.
HTML5 hjælper med stilbilleder
Det FIGUR element i HTML5 skal placeres omkring alle billeder, der kan stå alene i dokumentet. En måde at tænke på det er, hvis billedet kunne vises i et tillæg, så skulle det være inde i FIGUR element. Du kan derefter bruge dette element og FIGUR element for at tilføje stilarter til dine billeder.