Ṣiṣe Awọn aworan rẹ ati Lo awọn Aworan ni Awọn Ikọlẹ
Ọpọlọpọ awọn eniyan lo CSS lati ṣatunṣe ọrọ, yiyipada awoṣe, awọ, iwọn ati siwaju sii. Ṣugbọn ohun kan ti ọpọlọpọ eniyan ma gbagbe ni pe o le lo CSS pẹlu awọn aworan bi daradara.
Yiyipada aworan naa
CSS jẹ ki o ṣatunṣe bi aworan ṣe han lori oju-iwe yii. Eyi le wulo pupọ fun fifi pawọn awọn oju iwe rẹ silẹ. Nipa seto awọn aza lori gbogbo awọn aworan, o ṣẹda ojulowo boṣewa fun awọn aworan rẹ. Diẹ ninu awọn ohun ti o le ṣe:
- Fi ipinlẹ kan tabi iṣiro ni ayika awọn aworan
- Yọ awọn ifilelẹ awọ ni ayika awọn aworan ti o ni asopọ
- Ṣatunṣe iwọn ati / tabi iga ti awọn aworan
- Ṣe afikun ojiji oju oṣuwọn
- Yi aworan naa pada
- Yipada awọn aza nigba ti aworan ti wa ni bovered
Fifun aworan rẹ aala kan jẹ ibi nla lati bẹrẹ. Ṣugbọn o yẹ ki o ṣe akiyesi diẹ ẹ sii ju iha aala lọ - ro nipa gbogbo eti ti aworan rẹ ki o tun ṣatunṣe awọn agbegbe ati iderun . Aworan kan ti o ni okun dudu ti o dara julọ dara dara, ṣugbọn fifi diẹ ninu awọn padanu laarin awọn aala ati aworan le wo ani dara julọ.
img {
aala: 1px lagbara dudu;
padding: 5px;
}
O jẹ agutan ti o dara lati tọka awọn aworan ti kii ṣe ohun-ọṣọ nigbagbogbo , nigbati o ba ṣeeṣe. Ṣugbọn nigbati o ba ṣe, ranti pe ọpọlọpọ awọn aṣàwákiri fi awọ kan awọ kun aworan naa. Paapa ti o ba lo koodu ti o wa loke lati yi iyipo pada, ọna asopọ naa yoo ṣẹ pe ayafi ti o ba yọ tabi yi iyipo pada lori ọna asopọ naa. Lati ṣe eyi o yẹ ki o lo ilana ofin CSS kan lati yọ tabi yi iyipo pada si awọn aworan ti o ni asopọ:
img> a {
aala: kò si;
}
O tun le lo CSS lati yipada tabi seto iga ati iwọn awọn aworan rẹ. Bi o ṣe jẹ pe ko ni imọran nla lati lo aṣàwákiri lati ṣatunṣe awọn titobi aworan nitori awọn iyara ayipada, wọn n gba dara julọ ni awọn aworan ti n mu pada ki wọn tun dara. Ati pẹlu CSS o le ṣeto awọn aworan rẹ si gbogbo jẹ iwọn igbọnwọ tabi iga tabi paapa ṣeto awọn iṣiwọn lati jẹ ibatan si apo eiyan naa.
Ranti, nigba ti o ba ṣe atunṣe awọn aworan, fun awọn esi ti o dara ju, o yẹ ki o nikan tun ni iwọn kan - iwọn tabi iwọn. Eyi yoo jẹri pe aworan naa ni ipinnu abala rẹ, bẹẹni ko ni ajeji. Ṣeto awọn iye miiran fun idojukọ tabi firanṣẹ jade lati sọ fun aṣàwákiri lati tọju abala abala naa.
img {
iwọn: 50%;
iga: idojukọ;
}
CSS3 nfunni ojutu si iṣoro yii pẹlu awọn ohun-ini titun-ohun-elo ati ipo-idaniloju. Pẹlu awọn ile-ini wọnyi iwọ yoo ni anfani lati ṣafihan awọn aworan gangan ati iwọn ati bi o ti ṣe yẹ ki o ṣe akoso iwe abala. Eyi le ṣẹda awọn lẹta leta ni ayika awọn aworan rẹ tabi cropping lati gba aworan lati baamu ni iwọn ti a beere.
Nigba ti awọn ohun-iṣẹ CSS3-ko dara ati ipo-ipo ko ni atilẹyin pupọ, sibẹsibẹ awọn ohun elo CSS3 miiran wa ti o ni atilẹyin ni ọpọlọpọ awọn aṣàwákiri igbalode ti o le lo lati yipada awọn aworan rẹ. Awọn nkan bi awọsanma gbigbọn, awọn igun yika, ati awọn iyipada lati yiyi, skew, tabi gbe awọn aworan rẹ ni gbogbo iṣẹ ni bayi ni ọpọlọpọ awọn aṣàwákiri igbalode. O le lo awọn iyipada CSS lati ṣe awọn aworan yi pada nigbati o ba kọja, tabi tẹ, tabi ni kete lẹhin igba diẹ.
Lilo awọn Aworan bi abẹlẹ
CSS jẹ ki o rọrun lati ṣẹda awọn fifọ lẹhin pẹlu awọn aworan rẹ.
O le fi awọn akọle kun si oju-iwe gbogbo tabi si ohun kan pato kan. O rorun lati ṣẹda aworan atẹle lori oju-iwe pẹlu ohun-elo lẹhin-aworan:
ara {
abẹlẹ-aworan: url (background.jpg);
}
Yi ayanyan ara pada si ohun kan pato lori oju-iwe lati fi abẹlẹ kan lori ara kan.
Ohun orin miiran ti o le ṣe pẹlu awọn aworan jẹ ṣẹda aworan ti kii ko yi lọ pẹlu iyokù oju-iwe naa - bii omi-omi. O kan lo apẹrẹ-ara-ara: ti o wa titi; pẹlú pẹlu aworan atẹle rẹ. Awọn aṣayan miiran fun awọn ẹhin rẹ pẹlu ṣiṣe wọn tile kan ni ihamọ tabi ni inaro lilo ohun-elo atunhin-pada.
Kọ atunkọ-tun: tun-x; lati fi aworan naa pete ati lẹhin-tun: tun-y; lati fi sii ni titan. Ati pe o le ṣe ipo rẹ lẹhin pẹlu awọn ohun-elo lẹhin-ipo.
Ati CSS3 ṣe afikun diẹ sii aza fun awọn backgrounds rẹ. O le na awọn aworan rẹ lati fi ipele ti iwọn eyikeyi tabi ṣeto aworan atẹhin lati ṣe iwọn pẹlu iwọn window . O le yi ipo pada lẹhinna agekuru aworan atẹle. Ṣugbọn ọkan ninu awọn ohun ti o dara julọ nipa CSS3 ni pe o le ṣe agbekalẹ awọn aworan atẹhin diẹ ẹda lati ṣẹda awọn ipa ti o pọju diẹ.
HTML5 ṣe iranlọwọ Awọn aworan
Ẹya aworan ni HTML5 yẹ ki a gbe ni ayika eyikeyi awọn aworan ti o le duro nikan laarin iwe naa. Ọna kan lati ronu nipa rẹ jẹ pe aworan le han ninu apẹrẹ, lẹhinna o yẹ ki o wa ninu Ẹya aworan. O le lo eleyi naa ati ẹda FIGCAPTION lati fi awọn aza kun si awọn aworan rẹ.