Estilo ang Imong mga Imahen ug Gamiton ang mga Imahen sa Estilo
Daghang mga tawo ang naggamit sa CSS aron sa pag-adjust sa teksto, pag-usab sa font, sa kolor, sa gidak-on ug daghan pa. Apan ang usa ka butang nga kasagarang kalimtan sa daghang mga tawo mao nga magamit mo usab ang CSS nga may mga hulagway.
Pag-usab sa Imahen nga Imahen
Ang CSS nagtugot kanimo sa pag-adjust kung unsa ang gipakita sa imahe sa panid. Mahimo kini nga mapuslanon alang sa pagpadayon sa imong mga panid. Pinaagi sa pag-istar sa mga estilo sa tanang mga imahen, maghimo ka og standard nga pagtan-aw sa imong mga imahe. Pipila sa mga butang nga imong mahimo:
- Idugang ang usa ka utlanan o outline sa palibot sa mga larawan
- Kuhaa ang kolor nga gilibutan nga mga larawan
- Pag-adjust sa gilapdon ug / o gitas-on sa mga larawan
- Idugang ang usa ka landong sa landong
- Paikli ang larawan
- Usba ang mga estilo kung ang hulagway hovered
Ang paghatag sa imong hulagway nga usa ka utlanan usa ka maayong dapit sa pagsugod. Apan kinahanglan nimong hunahunaon ang labaw pa kay sa utlanan - hunahunaa ang tibuok nga daplin sa imong dagway ug i-adjust usab ang mga kilid ug padding . Ang usa ka larawan nga adunay usa ka nipis nga itom nga utlanan nindot tan-awon, apan ang pagdugang sa pipila ka padding tali sa utlanan ug ang hulagway mahimong mas maayo pa.
img {
utlanan: 1px solid black;
padding: 5px;
}
Maayo nga ideya nga kanunay mag-link sa mga non-decorative nga mga larawan , kung mahimo. Apan kung imo kanang buhaton, hinumdumi nga ang kadaghanang mga brower nagdugang og kolor nga utlanan libut sa hulagway. Bisan kung imong gigamit ang kodigo sa ibabaw aron mausab ang utlanan, ang tibuuk nga pagsabwag malikayan nga gawas kon imong kuhaon o usbon ang utlanan sa link usab. Sa paghimo niini ikaw kinahanglan nga mogamit sa CSS child rule aron kuhaon o usbon ang utlanan sa palibot nga mga hulagway:
img> usa ka {
utlanan: wala;
}
Mahimo usab nimo gamiton ang CSS aron mausab o i-set ang gitas-on ug gilapdon sa imong mga imahe. Samtang dili maayo nga ideya nga gamiton ang browser sa pag-adjust sa gidak-on sa hulagway tungod sa mga gikusgon nga pag-download, kini nagkagamay sa pag-usab sa mga hulagway aron nga kini maayo gihapon. Ug uban sa CSS mahimo nimo ibutang ang imong mga larawan ngadto sa tanan nga usa ka standard nga gilapdon o gitas-on o gani ibutang ang mga sukat nga may kalabutan sa sudlanan.
Hinumdumi, sa diha nga imong pag-ilis ang mga hulagway, alang sa labing maayo nga mga resulta, kinahanglan lamang nga sukdon ang usa ka dimensyon - ang gitas-on o ang gilapdon. Kini magamit nga ang imahe magpabilin sa iyang aspect ratio, ug mao nga dili kini katingad-an. Ibutang ang laing bili sa awtomatiko o ibilin kini aron sultihan ang browser aron mapadayon ang aspeto sa aspeto.
img {
gilapdon: 50%;
gitas-on: auto;
}
Ang CSS3 nagtanyag og usa ka sulbad sa niini nga problema sa bag-ong mga kabtangan nga adunay object-fit ug object-position. Uban niini nga mga kabtangan mahimo nimong ipasabut ang eksaktong hulagway sa gitas-on ug gilapdon ug kung unsa ang pagdumala sa aspeto. Mahimo kini makahimo sa mga epekto sa letterboxing sa imong mga hulagway o pagtanom aron makuha ang hulagway nga angay sa gidak-on nga gikinahanglan.
Samtang ang CSS3 object-fit ug object-posisyon nga mga kabtangan wala pa kaayo suportado, dunay uban pang mga CSS3 properties nga gisuportahan sa kadaghanan sa mga modernong mga browser nga mahimo mong gamiton aron mausab ang imong mga imahe. Ang mga butang sama sa mga anino sa pagbutang, mga lingin nga mga eskina, ug mga pagbag-o aron sa pag-rotate, skew, o paglihok sa imong mga hulagway tanan nagtrabaho karon sa kadaghanan sa modernong mga browser. Mahimo nimong gamiton ang mga transisyon sa CSS aron mahimo ang mga hulagway nga mausab kung gipalabay, o na-klik, o human sa usa ka panahon.
Paggamit sa Imahen nga Mga Larawan
Ang CSS naghimo nga sayon sa pagmugna og nindot nga mga kasinatian uban sa imong mga larawan.
Mahimo nimong idugang ang mga background sa tibuok nga pahina o sa usa ka piho nga elemento. Sayon ang paghimo og usa ka hulagway sa panid sa panid nga may panid sa imahen nga may kasinatian:
lawas {
background-image: url (background.jpg);
}
Usba ang tagapili sa lawas ngadto sa usa ka piho nga elemento sa panid aron ibutang ang background sa usa lang ka elemento.
Ang laing makalingaw nga butang nga mahimo nimo sa mga imahen mao ang paghimo og usa ka imahen nga dili mag-scroll sa uban nga pahina - sama sa watermark. Gigamit mo lang ang istilo sa kasinatian-pagkahimutang: natul-id; uban sa imong imahen sa background. Ang ubang mga kapilian alang sa imong mga kagikan naglakip sa paghimo kanila nga tile lang nga pahayag o vertikal nga gamit ang background-repeat property.
Isulat ang background-balik-balik: balik-x; sa pag-tile sa hulagway nga pinahigda ug kaagi-balik-balik: balik-y; sa tile vertically. Ug mahimo nimo nga ipahimutang ang imong imahen sa background sa posisyon sa background-posisyon.
Ug ang CSS3 nagdugang dugang mga estilo alang sa imong mga kaagi usab. Mahimo nimo ibutang ang imong mga imahen aron mohaum sa bisan unsang kadako nga background o ibutang ang hulagway sa background aron mapadako ang gidak-on sa bintana . Mahimo nimo mausab ang posisyon ug dayon i-clip ang larawan sa likod. Apan usa sa pinakamaayo nga mga butang mahitungod sa CSS3 mao nga mahimo nimong mapahimuslan ang daghang mga hulagway sa background aron makahimo og labi pa nga makuti nga mga epekto.
Ang HTML5 Nagtabang sa Mga Estilo nga Imahe
Ang hulagway nga elemento sa HTML5 kinahanglan ibutang sa bisan unsang mga hulagway nga mahimong mag-inusara sa sulod sa dokumento. Usa ka paagi nga hunahunaon kini kung ang imahe mahimong makita sa usa ka appendix, nan kini kinahanglan nga anaa sa sulod sa numero nga elemento. Mahimo nimong gamiton ang elemento ug elemento sa FIGCAPTION aron idugang ang mga estilo sa imong mga imahen.