Mange bruger CSS til at justere tekst, ændre skrifttype, farve, størrelse og meget mere. Men én 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 meget nyttigt for at holde dine sider konsistente. Ved at indstille stilarter på alle billeder, opretter du et standardudseende for dine billeder. Nogle af de ting, du kan gøre:
- Tilføj en ramme eller omrids omkring billederne
- Fjern den farvede grænse omkring linkede billeder
- Justering af bredden og / eller højden af billederne
- Tilføj en drop skygge
- Drej billedet
- Skift stilarterne, når billedet er svævet over
At give dit billede en ramme er et godt sted at starte. Men du bør overveje mere end bare grænsen - tænk hele kanten af dit billede og juster marginerne og polstring også. Et billede med en tynd sort kant ser fint ud, men tilføjer noget polstring mellem grænsen, og billedet kan se endnu bedre ud.
img { border: 1px solid black; polstring: 5px;}
Det er en god ide at altid forbinde 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, vil linket tilsidesætte det, medmindre du også fjerner eller ændrer grænsen på linket. For at gøre dette bør du bruge en CSS-børneregel til at fjerne eller ændre grænsen omkring sammenknyttede billeder:
img> a { grænse: ingen;}
Du kan også bruge CSS til at ændre eller indstille højden og bredden af dine billeder. Selvom det ikke er en god idé 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 alle at være en standardbredde eller højde eller endda indstille dimensionerne til at være i forhold til beholderen.
Husk, når du ændrer størrelsen på billeder, skal du kun ændre størrelse på en dimension - højden eller bredden for at opnå de bedste resultater. Dette vil angribe, at billedet holder sit billedforhold, og det ser ikke ud til at være mærkeligt. Indstil den anden værdi til auto eller lad det gå ud for at fortælle browseren for at holde billedformatet ensartet.
img { bredde: 50%; højde: auto;}
CSS3 tilbyder en løsning på dette problem med de nye egenskaber objekt-fit og objekt-stillingen. Med disse egenskaber kan du definere den nøjagtige billedhøjde og bredde og hvordan billedforholdet skal håndteres. Dette kan skabe letterboxing effekter omkring dine billeder eller beskæring for at få billedet til at passe i den ønskede størrelse.
Mens CSS3 objekt-fit og objekt-stillingen Egenskaber understøttes ikke bredt, men der er andre CSS3-egenskaber, som er godt understøttet i de fleste moderne browsere, som du kan bruge til at ændre dine billeder. Ting som drop skygger, afrundede hjørner og transformationer til at rotere, skæv eller flytte dine billeder fungerer alle lige nu i de fleste moderne browsere. Du kan derefter bruge CSS-overgange til at gøre billederne ændret, når de hoveres over eller klikkes eller lige efter en periode.
Brug af billeder som baggrund
CSS gør det nemt at skabe flotte baggrunde med dine billeder. Du kan tilføje baggrunde til hele siden eller til blot et bestemt element. Det er nemt at oprette et baggrundsbillede på siden med baggrundsbillede ejendom:
krop { baggrundsbillede: url (background.jpg);}
Skift legeme vælg til et bestemt element på siden for at sætte baggrunden på kun et element.
En anden sjov ting, du kan gøre med billeder, er at oprette et baggrundsbillede, der ikke rulle med resten af siden - som et vandmærke. Du bruger bare stilen baggrundsbestemmelse: fast; sammen med dit baggrundsbillede. Andre muligheder for dine baggrunde er at gøre dem fliser bare vandret eller lodret ved hjælp af background-repeat ejendom. Skrive baggrunds-gentagelse: gentag-x; at flise billedet vandret og baggrunds-gentagelse: gentag-y; at flise lodret. Og du kan placere dit baggrundsbillede med baggrund-stillingen ejendom.
Og CSS3 tilføjer også flere stilarter til dine baggrunde. Du kan strække dine billeder for at passe til en hvilken som helst størrelse baggrund eller indstille baggrundsbilledet til at skalere med vinduets størrelse. Du kan ændre positionen og derefter klippe baggrundsbilledet. Men en af de bedste ting ved CSS3 er, at du nu kan lagre flere baggrundsbilleder for at skabe endnu mere indviklede effekter.
HTML5 hjælper stilbilleder
Det FIGUR element i HTML5 skal placeres omkring billeder, der kan stå alene i dokumentet. En måde at tænke på er, hvis billedet kunne vises i et bilag, så skal det være indenfor FIGUR element. Du kan derefter bruge det element og FIGCAPTION element til at tilføje stilarter til dine billeder.
