Stil jo images en gebrûk fan ôfbyldings yn stilen
In protte minsken brûke CSS om tekst te bewurkjen, it lettertype, de kleur, de grutte en mear te feroarjen. Mar ien ding dat in soad minsken ferjitten binne faaks dat jo CSS ek bybylden brûke kinne.
It ôfbylding sels meitsje
CSS jout jo oan te passen hoe't it byld stiet op 'e side. Dit kin echt brûkber wêze om jo siden konsekwint te hâlden. Troch ynstellingen fan stilen op alle ôfbyldings te meitsjen, meitsje jo in standert besjen foar jo ôfbyldings. Guon fan 'e dingen kinne jo dwaan:
- Foegje in grins of skets om 'e bylden
- Brûk de farieare grins om keppele ôfbyldings
- It oanpassen fan de breedte en / of de hichte fan de bylden
- Foegje in djippe skaad
- Rotte it byld
- Feroarje de stilen as it byld skreaun wurdt
Jou jo ôfbylding in grins is in geweldich plak om te begjinnen. Mar jo moatte mear beskôgje as allinich de grins - tinke oer de hiele râne fan jo byld en ajw de rânen en padding ek. In ôfbylding mei in dûnker swarte grins sjocht aardich, mar it tafoegjen fan wat padding tusken de grins en it byld kin noch better sjen.
img {
grins: 1px solid swart;
padding: 5px;
}
It is in goede idee om altyd keppele net-dekorative bylden te keppeljen , as it mooglik is. Mar as jo dogge, tink derom dat de measte browsers in farieare grins om it byld taheakje. Ek as jo de boppeste koade brûke om de grins te feroarjen, sil de link it oerskriuwe, útsein as jo ek de rânen op 'e keppeling fuortsmite of feroarje. Om dit te dwaan moatte jo in CSS-regel brûke om de râne fan keppele ôfbyldings te ferwiderjen of te feroarjen:
img> a {
grins: gjin;
}
Jo kinne ek CSS brûke om de hichte en breedte fan jo ôfbyldings te feroarjen of yn te stellen. Wyls it net in geweldige idee is om de blêder te brûken foar it oanpassen fan byldmjittingen fanwege ynladeferskillen, wurde se folle better by it feroarje fan ôfbyldingen sadat se noch goed fine. En mei CSS kinne jo ôfbyldings ynstelle foar allegearre in standertbreedte of hichte of sels de dimensjes opnimme om relatyf oan 'e kontener te wêzen.
Tink derom, as jo ôfbyldingen feroarje, foar bêste resultaten, moatte jo allinich ien dimensje feroarje - de hichte of de breedte. Dit soarget derfoar dat de ôfbylding har aspect ratio hâldt, en sa sjocht it net frjemd. Set de oare wearde om automatisch te jaan of it út te litten om de browsers te fertellen om it aspect ratio konsekwint te hâlden.
img {
breedte: 50%;
hichte: auto;
}
CSS3 biedt in oplossing foar dit probleem mei de nije eigenskippen-objekt- en objektposysje-nije eigenskippen. Mei dizze eigenskippen kinne jo de krekte ôfbyldingshichte en -breedte definiearje en hoe't it aspect ratio behannele wurde moat. Dit kin letterkripting effekten meitsje om jo ôfbyldings te meitsjen of opnimmen om it byld te passen te passen yn 'e needsaaklike groei.
Wylst de CSS3 object-fit en objekt-posysje-eigenskippen noch net folle stipe wurde, binne der oare CSS3-eigenskippen dy't goed binne stipe yn de measte moderne browsers dy't jo brûke kinne om jo ôfbyldings te feroarjen. Dingen lykas drippen skaden, rûnte hoeken en transformationen om te roppen, te skowen, of ferpleatse jo ôfbyldings al wer wurkje yn 'e meast moderne browsers. Jo kinne dan CSS-transysjes brûke om de ôfbyldings te wizigjen as jo oerflakke, of klikke, of krekt nei in perioade fan tiid.
It brûken fan ôfbyldingen as eftergrûn
CSS makket it maklik om fancy backgrounds te meitsjen mei jo ôfbyldings.
Jo kinne de eftergrûn tafoegje oan 'e folsleine side of allinich in spesifyk elemint. It is maklik om in eftergrûnôfbylding op 'e side te meitsjen mei de eftergrûn-byldeigenskip:
lichem {
background-image: url (background.jpg);
}
Selektearje de lichemsekselder nei in spesifyk elemint op 'e side om de eftergrûn op just ien elemint te pleatsen.
In nijsgjirrige ding dat jo mei ôfbyldings dwaan kinne is in eftergrûnôfbylding meitsje dy't net rôlje mei de rest fan 'e side - lykas in wettermark. Jo brûke gewoan de styl eftergrûn-attaching: fêst; mei jo eftergrûnôfbylding. Oare opsjes foar jo eftergrûnen omfetsje se har flier just horizontaal of vertysk te brûken mei de eftergrûn-werhelje eigenskip.
Skriuw eftergrûn-werhelje: repet-x; om it byld horizontaal te meitsjen en eftergrûn-werhelje: werhelle-y; omkeaste vertaallik te meitsjen. En jo kinne jo eftergrûnôfbylding opstelle mei de eftergrûn-posysje-eigendom.
En CSS3 addt mear stilen foar jo eftergrûnen. Jo kinne jo ôfbyldings útwreidzje om allegrûngrutte te passen of de eftergrûnôfbylding te lizzen om te skalen mei de finstergrutte . Jo kinne de posysje feroarje en klik dan de eftergrûnôfbylding. Mar ien fan 'e bêste dingen oer CSS3 is dat jo no in meardere eftergrûnôfbylding lizze kinne om noch mear komplisearre effekten te meitsjen.
HTML5 stipet stijlbylden
It elemint figuer yn HTML5 moat om elke ôfbyldings pleatst wurde dy't allinich yn it dokumint stean kinne. Ien manier om te tinke oer is as it byld in bylûd ferskine koe, dan moat it binnen it figuer elemint wêze. Jo kinne dan dit elemint brûke en it FIGCAPTION-elemint taheakken tafoegje oan jo ôfbyldings.