Te whakamahi CSS me nga Images

Te Kāhua o ō Whakaahua me te Whakamahia o Ngā Atahanga ki te Tae

He maha nga tangata e whakamahi ana i te CSS hei whakatika i nga kuputuhi, hei huri i te momotuhi, te tae, te rahi me te ake. Engari tetahi mea e warewarehia ana e te nuinga o te iwi ka taea e koe te whakamahi CSS me nga whakaahua ano hoki.

Te huri i te Whakaahua

Ka taea e CSS te whakatika i te ahua o te ahua i runga i te whaarangi. Ka taea e tenei te tino whai hua mo te pupuri i o raatau whārangi. Na roto i te tautuhi i nga momo i runga i nga whakaahua katoa, ka hangaia e koe he tirohanga paerewa mo o maatau whakaahua. Ko etahi o nga mea ka taea e koe:

Ko te tuku i to ahua ko te rohe he wahi pai ki te timata. Engari kia nui ake te whakaaro ki a koe i te taha o te rohe - whakaarohia te taha katoa o to ahua me te whakatika i nga taapete me nga paera . He ahua pai te ahua o te pango pango me te pango, engari ko te whakawhitinga i etahi panuku i waenganui i te rohe me te ahua ka pai ake te titiro.

img {
rohe: 1px pango parauri;
te taraiwa: 5px;
}

He pai ki te hono tonu i nga whakaahua kore-whakapaipai , ina taea. Engari, ka mahara, ko te nuinga o nga kaitoro e whakauru i te rohe tae noa ki te ahua. Ahakoa ka whakamahi koe i te waehere i runga ake hei huri i te rohe, ka whakakorehia te hononga kaore koe e tango, ka huri ranei i te rohe ki te hononga. Ki te mahi i tenei me whakamahi koe i te ture a te tamaiti CSS hei tango, hei whakarereke i te rohe ki nga whakaahua honohono:

img> a {
rohe: kahore;
}

Ka taea hoki e koe te whakamahi CSS ki te huri, ki te tautuhi i te teitei me te whanui o ou whakaahua. Ahakoa ehara i te mea nui ki te whakamahi i te pūtirotiro hei whakatika i te rahi o te ahua o te ahua o te ahua o te tere o te tikiake, kei te pai ake nga ahuatanga o te whakaahua i nga ahuatanga kia pai ake ai. A ma te CSS ka taea e koe te tautuhi i ou whakaahua ki te katoa hei paerewa paerewa ranei teitei ranei, ka tautuhi ranei i nga waa ki te hono ki te ipu.

Kia mahara, ka whakaekea e koe nga whakapakoko, mo nga hua pai, me whakarahi ano koe i tetahi waahanga - te teitei me te whanui. Ma tenei e kii te ahua o te ahua ki te ahuatanga o te ahuatanga, a kaore e ahua ke. Whakaritea tetahi atu uara ki te motokoto, waiho ranei ki te korero ki te rorohiko ki te pupuri i te waahanga o te ahua.

img {
whanui: 50%;
teitei: te auto;
}

Ka hoatu e CSS3 he otinga ki tenei raruraru me nga mea hou-ahanoa me te ahanoa-ahanoa. Ma enei mea ka taea e koe te tautuhi i te tiketike o te ahua me te whanui o te ahua me te pehea e whakahaerehia ai te taurangi o te ahua. Ko tenei ka waihanga i nga paanga pouaka reta ki a koutou whakaahua, ki te whakaeke ranei kia tae ai te ahua ki te rahi e hiahiatia ana.

Ahakoa kaore i te tautokona te nuinga o nga āhuatanga CSS3 me nga āhuatanga ahanoa-a-ringa, kei reira etahi atu āhuatanga CSS3 e tino tautokona ana i roto i te nuinga o nga kaituhi hou ka taea e koe te whakamahi hei whakarereke i ou whakaahua. Ko nga mea e rite ana ki te maturuturu o nga atarangi, nga porotaka, me nga huringa ki te hurihuri, ki te whakatere, ki te nekehanga ranei i nga whakaahua katoa e mahi ana inaianei i roto i te nuinga o nga kaituhi hou. Ka taea e koe te whakamahi i nga whakawhitinga CSS hei whakarereke i nga whakaahua ka pakaruhia, ka panui ranei, ka tika ranei i muri i te waa.

Te whakamahi i nga whakaahua hei Papamuri

Ka taea e CSS te ngawari ki te hanga i nga papanga ataahua ki a koutou whakaahua.

Ka taea e koe te tāpiri i te papamuri ki te katoa o te whārangi, ki te mea noa ranei. He mea ngawari ki te hanga i tetahi ahua papamuri i runga i te whaarangi me te taonga o te papamuri:

tinana {
taapiri-image: url (background.jpg);
}

Hurihia te kaitono o te tinana ki tetahi huānga motuhake i runga i te whārangi ki te tuku i te papamuri i runga i te kotahi noa te huanga.

Ko tetahi atu mea ngahau e taea e koe ki te hanga pikitia hangaia he ahua papamuri e kore e tuhi ki te toenga o te whārangi - ano he tohuwai. Kei te whakamahi noa koe i te hanganga taipitopito-a-ringa; me to maakete whakaahua. Ko etahi atu waahanga mo o raatau koiora ko te whakauru i te tira ki runga noa iho, i te poutai ranei e whakamahi ana i te rawa o muri.

Tuhia te panui-korero ano: repe-x; ki te tarai i te ahua me te whakaari-ano: ano-y; ki te tile tuuturu. Ka taea e koe te tuhi i to pikitia taapiri me te taonga o te papamuri.

A ka whakarato ano a CSS3 i etahi atu momo mo o taiao. Ka taea e koe te whakapiri i nga whakaahua kia uru atu ai ki tetahi papanga rahi ranei, tautuhi ranei i te ahua o te atahanga ki te tauine me te rahi o te matapihi . Ka taea e koe te huri i te tūranga ka kiriatahia te atahanga papamuri. Engari ko tetahi o nga mea pai mo te CSS3 ko te ka taea e koe te tuhi i nga whakaahua taapiri maha hei waihanga i etahi atu tino painga.

HTML5 Awhina i te Images Images

Ko te tohu WHAKAHI i roto i te HTML5 me whakanoho ki tetahi whakaahua e tu tu ana i roto i te tuhinga. Ko tetahi o nga huarahi e whakaarohia ai, mehemea ka puta mai te ahua i roto i te taapiri, ka waiho i roto i te ahua WHAKAWEKI. Ka taea e koe te whakamahi i taua huinga me te ahua o te FIGCAPTION hei taapiri i nga momo ki a koe.