Etsa Litšoantšo tsa Hao le Sebelisa Litšoantšo Litlhapong
Batho ba bangata ba sebelisa CSS ho fetola mongolo, ho fetola molaetsa, 'mala, boholo le tse ling. Empa ntho e 'ngoe eo hangata batho ba bangata ba e lebalang ke hore u ka sebelisa CSS ka litšoantšo hape.
Ho Fetola Setšoantšo ka Boona
CSS eu lumella ho fetola kamoo setšoantšo se bontsang kateng leqepheng. Sena se ka ba sa bohlokoa haholo ho boloka maqephe a hau a tsitsitse. Ka ho beha mekhoa litšoantšong tsohle, u etsa hore litšoantšo tsa hau li shebahale hantle. Tse ling tsa lintho tseo u ka li etsang:
- Kenya moeli kapa kemiso ho pota litšoantšo
- Tlosa moeli o mebala o potolohileng litšoantšo tse kopantsoeng
- Ho lokisa bophara le / kapa bophahamo ba litšoantšo
- Kenya seriti sa lerotholi
- Fetola setšoantšo
- Fetola mekhoa ha setšoantšo se fetoloa
Ho fana ka setšoantšo sa moeli ke sebaka se setle sa ho qala. Empa u lokela ho nahana ka ho feta feela moeling - nahana ka bohale bohle ba setšoantšo sa hau le ho fetola margins le padding hape. Setšoantšo se nang le moeli o mosesaane o motšo se shebahala se monate, empa ho phaella ho feta pakeng tsa moeli le setšoantšo ho ka bonahala ho le molemo.
img {
moeli: 1px motšo o tiileng;
ho robala: 5px;
}}
Ke khopolo e ntle ho lula u kopanya litšoantšo tse sa khabisitsoeng , ha ho khoneha. Empa ha o etsa joalo, hopola hore lipapatso tse ngata li eketsa moeli o mebala o pota-potileng setšoantšo. Esita le haeba o sebelisa khoutu e boletsoeng ka holimo ho fetola moeli, khokahanyo e tla feta ho feta ha u tlosa kapa u fetola moeli le linkong hape. Ho etsa sena o lokela ho sebelisa puso ea bana ba CSS ho tlosa kapa ho fetola moeli o potolohileng litšoantšo tse amanang:
img> a {
moeli: ha ho letho;
}}
O ka boela oa sebelisa CSS ho fetola kapa ho beha bophahamo le bophara ba litšoantšo tsa hau. Le hoja e se khopolo e kholo ea ho sebelisa sebapali ho fetola boholo ba litšoantšo ka lebaka la lebelo la ho jarolla, li ntse li ntlafala haholo litšoantšong tsa resizing e le hore li ntse li bonahala li le ntle. 'Me ka CSS u ka beha litšoantšo tsa hau ho bohle hore e be bophara bo bolelele kapa bophahamo kapa esita le ho beha litekanyo hore li be haufi le setshelo.
Hopola, ha u fetola litšoantšo, bakeng sa liphello tse ntle, u lokela ho fetola moeli o le mong feela - bophahamo kapa bophara. Sena se tla etsa hore setšoantšo se lule se lekana, 'me ha se shebahala se makatsa. Beha boleng bo bong ho koloi kapa ue tlohele ho bolella sebapali ho boloka boitsebiso bo lekaneng.
img {
bophara: 50%;
bolelele: koloi;
}}
CSS3 e fana ka tharollo bothateng bona ka thepa e mecha ntho e lumellanang le ntho eo e seng ea bohlokoa ka eona. Ka lisebelisoa tsena u tla khona ho hlalosa boemo bo nepahetseng ba setšoantšo le bophara le hore na karolo ea bobeli e lokela ho sebetsoa joang. Sena se ka 'na sa baka liphetoho tsa letterboxing ho potoloha litšoantšo tsa hau kapa likoti ho fumana setšoantšo se lumellane le boholo bo hlokehang.
Le hoja lihlahisoa tsa CSS3 tse sa lumellaneng le li-object-position li sa tšehetsoa haholo, ho na le thepa e meng ea CSS3 e ts'ehetsoeng hantle lipapaling tse ngata tsa morao-rao tseo u ka li sebelisang ho fetola litšoantšo tsa hau. Lintho tse kang moriti oa lerotholi, likhutlo tse pota-potileng le liphetoho ho potoloha, skew, kapa ho tsamaisa litšoantšo tsohle li sebetsa hona joale ho li-browsers tsa kajeno. O ka sebelisa liphetoho tsa CSS ho etsa hore litšoantšo li fetohe ha li koahetsoe, kapa li kentse, kapa ka mora nako.
Ho Sebelisa Litšoantšo e le Litsela
CSS e etsa hore ho be bonolo ho hlahisa metso e mebala-bala le litšoantšo tsa hau.
O ka eketsa mongobo ho leqephe lohle kapa ho feela ntho e itseng. Ho bonolo ho etsa setšoantšo sa mokokotlo leqepheng le setša sa setšoantšo sa mokokotlo:
'mele {
setšoantšo sa mokokotlo: url (mokokotlo.jpg);
}}
Fetola mokhethoa oa 'mele ho ntho e itseng leqepheng lena ho beha mokokotlo ho ntlha e le' ngoe feela.
Ntho e 'ngoe e monate eo u ka e etsang le litšoantšo e etsa setšoantšo sa mokokotlo se sa phaleng le leqephe le leng kaofela - joaloka watermark. U se u sebelisa mokhoa-sethoathoa sa sethala: o tsitsitseng; hammoho le setšoantšo sa setšoantšo sa hau. Mekhoa e meng ea limelo tsa hau e kenyelletsa ho etsa hore e kene ka holimo kapa ka holimo ho sebelisa thepa ea morao-pheta.
Ngola ka morao-pheta-pheta: pheta-x; ho tile setšoantšo ka holimo le ka morao-pheta-pheta-pheta-pheta-y; ho tile ka holimo. 'Me u ka beha setšoantšo sa setho sa hau ka setša sa boemo ba morao.
'Me CSS3 e eketsa mekhoa e meng ea limelo tsa hau hape. O ka otlolla litšoantšo tsa hau ho lumellana le mokokotlo ofe kapa ofe kapa beha setšoantšo sa mokokotlo ho fokotsa boholo ba fensetere . O ka fetola boemo mme o kopanya setšoantšo sa morao. Empa e 'ngoe ea lintho tse molemo ka ho fetisisa ka CSS3 ke hore hona joale u ka kenya litšoantšo tse ngata tsa mokokotlo ho hlahisa liphello tse thata haholoanyane.
HTML5 e Thusa Mefuta ea Litšoantšo
Ntho e ngotsoeng ka HTML5 e lokela ho behoa ho pota litšoantšo leha e le life tse ka emang li le mong ka har'a tokomane. Tsela e 'ngoe eo u ka nahanang ka eona ke hore setšoantšo se ka hlaha sehlomathisong, ebe se lokela ho ba ka hare ho sebopeho. U ka sebelisa ntho eo le sebopeho sa FIGCAPTION ho eketsa mekhoa ho litšoantšo tsa hau.