Många använder CSS för att justera text, ändra teckensnitt, färg, storlek och mer. Men en sak som många ofta glömmer är att du kan använda CSS med bilder också.
Ändra bilden själv
CSS låter dig justera hur bilden visas på sidan. Detta kan vara mycket användbart för att hålla dina sidor konsekventa. Genom att ställa in stilar på alla bilder skapar du ett standardutseende för dina bilder. Några av de saker du kan göra:
- Lägg till en kant eller kantlinje runt bilderna
- Ta bort den färgade gränsen runt länkade bilder
- Justera bredden och / eller höjden på bilderna
- Lägg till en droppskugga
- Rotera bilden
- Ändra stilar när bilden är svävad över
Att ge din bild en gräns är ett bra ställe att börja. Men du bör överväga mer än bara gränsen - tänk på hela kanten på din bild och justera marginerna och vadderingen också. En bild med en tunn svart kant ser bra ut, men lägger till en del vaddering mellan gränsen och bilden kan se ännu bättre ut.
img { gräns: 1px solid svart; vaddering: 5px;}
Det är en bra idé att alltid länka icke-dekorativa bilder, när det är möjligt. Men när du gör det, kom ihåg att de flesta webbläsare lägger till en färgad kant runt bilden. Även om du använder ovanstående kod för att ändra gränsen, kommer länken att åsidosätta det om du inte tar bort eller ändrar gränsen på länken också. För att göra detta bör du använda en CSS-barnregel för att ta bort eller ändra gränsen kring länkade bilder:
img> a { gränsen: ingen;}
Du kan också använda CSS för att ändra eller ställa in bildernas höjd och bredd. Medan det inte är en bra idé att använda webbläsaren för att justera bildstorlekar på grund av nedladdningshastigheter, blir de mycket bättre vid att ändra storlek på bilder så att de fortfarande ser bra ut. Och med CSS kan du ställa in dina bilder till alla vara en standard bredd eller höjd eller till och med ställa in måtten för att vara i förhållande till behållaren.
Kom ihåg att när du ändrar storleken på bilderna, för bästa resultat, ska du bara ändra storlek på en dimension - höjden eller bredden. Detta kommer att förvissa sig om att bilden håller sitt bildförhållande, och det ser inte så konstigt ut. Ställ in det andra värdet till bil eller lämna ut det för att berätta för webbläsaren att hålla bildformatet konsekvent.
img { bredd: 50%; höjd: auto;}
CSS3 erbjuder en lösning på detta problem med de nya egenskaperna objekt-fit och objekt-positionen. Med dessa egenskaper kan du definiera exakt bildhöjd och bredd och hur bildformatet ska hanteras. Detta kan skapa brevlådeffekter runt dina bilder eller beskärning för att få bilden att passa i den storlek som krävs.
Medan CSS3 objekt-fit och objekt-positionen Egenskaper stöds inte allmänt ännu, det finns andra CSS3 egenskaper som är bra stödda i de flesta moderna webbläsare som du kan använda för att ändra dina bilder. Saker som dropskuggor, avrundade hörn och transformationer för att rotera, skeva eller flytta dina bilder fungerar alla just nu i de flesta moderna webbläsare. Du kan sedan använda CSS-övergångar för att göra bilderna ändrade när de svängs över, eller klickas, eller strax efter en tidsperiod.
Använda bilder som bakgrund
CSS gör det enkelt att skapa fina bakgrunder med dina bilder. Du kan lägga till bakgrunder på hela sidan eller bara ett visst element. Det är lätt att skapa en bakgrundsbild på sidan med bakgrundsbild fast egendom:
kropp { bakgrundsbild: url (background.jpg);}
Ändra kropp väljaren till ett visst element på sidan för att lägga bakgrunden på bara ett element.
En annan rolig sak som du kan göra med bilder är att skapa en bakgrundsbild som inte rullar med resten av sidan - som ett vattenstämpel. Du använder bara stilen bakgrundsbeslut: fast; tillsammans med din bakgrundsbild. Andra alternativ för din bakgrund inkluderar att göra dem kakel bara horisontellt eller vertikalt med hjälp av bakgrund-repeat fast egendom. Skriva bakgrundsrepetition: repetera-x; att kakel bilden horisontellt och bakgrundsrepetition: repetera-y; att belägga vertikalt Och du kan placera din bakgrundsbild med bakgrund-positionen fast egendom.
Och CSS3 lägger till fler stilar för din bakgrund också. Du kan sträcka dina bilder så att de passar vilken storlek som helst, eller ställa in bakgrundsbilden att skala med fönsterstorleken. Du kan ändra positionen och sedan klippa bakgrundsbilden. Men en av de bästa sakerna med CSS3 är att du nu kan laga flera bakgrundsbilder för att skapa ännu mer invecklade effekter.
HTML5 hjälper stilbilder
De FIGUR element i HTML5 ska placeras runt alla bilder som kan stå ensamma i dokumentet. Ett sätt att tänka på är om bilden skulle kunna visas i en bilaga, då borde den vara inne i FIGUR element. Du kan då använda det elementet och FIGCAPTION element för att lägga till stilar till dina bilder.
