Bawo ni lati ṣe atẹgun aworan ti o wa ni aaye lati fi oju-iwe ayelujara kan han

Ṣe aaye ayelujara ti oju-iwe ayelujara rẹ pẹlu awọn eya aworan lẹhin

Awọn aworan jẹ ẹya pataki ti awọn aaye ayelujara ti o wuni. Eyi pẹlu awọn lilo awọn aworan atẹlẹsẹ. Awọn wọnyi ni awọn aworan ati awọn eya ti o lo ni agbegbe awọn oju-iwe kan ti o lodi si awọn aworan ti a gbekalẹ bi ara awọn oju akoonu. Awọn aworan atẹlẹ yii le fi ojulowo ojulowo si oju-iwe kan ati ki o ran ọ lọwọ lati ṣe aṣeyọri oniru aworan ti o le wa fun oju-iwe kan.

Ti o ba bẹrẹ iṣẹ pẹlu awọn aworan atẹlẹsẹ, iwọ yoo laisi iyemeji lọ sinu ipo-iṣẹlẹ ti o fẹ aworan kan lati taara lati dara si oju-iwe naa.

Eyi jẹ otitọ paapaa fun awọn aaye ayelujara ti n ṣe idahun ti wọn nfiranṣẹ si ọpọlọpọ awọn ẹrọ ati titobi iboju .

Ifẹ yi lati ṣafọri aworan ti o wa ni iwaju jẹ ifẹ ti o wọpọ fun awọn apẹẹrẹ ayelujara nitoripe kii ṣe gbogbo awọn aworan ni ibamu ni aaye aaye ayelujara kan. Dipo ipilẹ iwọn ti o wa titi, sisọ aworan naa jẹ ki o rọ lati fi oju si oju-iwe laiṣe bii bi o ti wa ni fife tabi ti dínki window window jẹ.

Ọna ti o dara julọ lati ṣafọ aworan lati fi ipele ti oju-iwe kan jẹ lati lo ohun elo CSS3 , fun iwọn-lẹhin. Eyi jẹ apẹẹrẹ ti o nlo aworan atẹhin fun ara ti oju-iwe kan ati eyiti o ṣeto iwọn si 100% ki yoo ma na lati taamu iboju.

ara {
lẹhin: url (bgimage.jpg) ko-tun;
lẹhin-iwọn: 100%;
}

Gẹgẹ bi caniuse.com, ohun-ini yii ṣiṣẹ ni IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, ati lori gbogbo awọn aṣàwákiri aṣàwákiri pàtàkì. Eyi ni wiwa fun gbogbo awọn aṣàwákiri igbalode wa loni, eyi ti o tumọ si o yẹ ki o lo ohun-ini yi laisi iberu pe kii yoo ṣiṣẹ lori iboju ẹnikan.

Wọle atẹhin ti o wa ni Awọn Burausa Agbalagba

O ṣe pataki pe iwọ yoo nilo lati ṣe atilẹyin fun awọn aṣàwákiri gbogbo ti o ju IE9 lọ, ṣugbọn jẹ ki a ro pe o ṣe aniyan pe IE8 ko ṣe atilẹyin fun ohun-ini yi. Ni iru apẹẹrẹ, o le ni irori ti o gbasilẹ lẹhin. Ati pe o le lo awọn prefixes aṣàwákiri fun Firefox 3.6 (-moz-background-size) ati Opera 10.0 (-o-background-size).

Ọna to rọọrun si iro kan ti o nà aworan lẹhin ni lati ṣafa o kọja gbogbo oju-iwe. Lẹhinna o ko pari pẹlu aaye afikun tabi ni lati ṣàníyàn pe ọrọ rẹ ba wa ni agbegbe ti o tan. Eyi ni bi o ṣe le ṣe:

id = "bg" />

1. Akọkọ, rii daju pe gbogbo awọn aṣàwákiri ni 100% iga, 0 awọn ipo, ati 0 padding lori awọn eroja BODY ati HTML. Gbe awọn wọnyi ni ori iwe HTML rẹ:

2. Fi aworan ti o fẹ lati wa ni ẹhin gẹgẹbi akọkọ ti oju-iwe ayelujara, ti o si fun ni id ti "bg":

3. Fi aworan atẹhin gbe ki o wa ni oke ati osi ati ni 100% jakejado ati 100% ni iga. Fi eyi kun si apakan ara rẹ:

   img # bg {
   ipo: ti o wa titi;
   oke: 0;
   sosi: 0;
   iwọn: 100%;
   iga: 100%;
   }

4. Fi gbogbo akoonu rẹ kun si oju-ewe inu ẹya DIV pẹlu id ti "akoonu". Fi DIV wa ni isalẹ aworan naa:

   Gbogbo akoonu rẹ nibi - pẹlu awọn akọle, paragirafi, ati bẹbẹ lọ.

   Akiyesi: o ni anfani lati wo oju-iwe rẹ ni bayi. Awọn aworan yẹ ki o han nà, ṣugbọn akoonu rẹ ti sọnu patapata. Kí nìdí? Nitori pe aworan atẹhin jẹ 100% ni giga, ati iyipo akoonu jẹ lẹhin aworan ni sisanwọle ti iwe-ipamọ - ọpọlọpọ awọn aṣàwákiri kii yoo ṣe afihan.
   
5. Fi akoonu rẹ silẹ ki o jẹ ibatan ati ki o ni itumọ -ọrọ ti-1. Ti eyi yoo mu o wa loke aworan ti o wa ninu awọn aṣàwákiri ti o ni ibamu. Fi eyi kun si apakan ara rẹ:

   #content {
   ipo: ojulumo;
   z-index: 1;
   }

1. Ṣugbọn o ko ṣe. Internet Explorer 6 kii ṣe itọnisọna deedee o si tun ni diẹ ninu awọn iṣoro. Ọpọlọpọ awọn ọna lati tọju CSS lati gbogbo ẹrọ lilọ kiri ayelujara ṣugbọn IE6, ṣugbọn rọọrun (ati pe o kere ju lati fa awọn iṣoro miiran) ni lati lo awọn akọsilẹ asiko. Fi eyi ti o tẹle lẹhin iwe kika rẹ ni ori iwe rẹ:

2. Ninu iwifun ti a ṣe afihan, fi iwe ti o ni diẹ pẹlu diẹ ninu awọn aza lati mu IE 6 lati mu ṣiṣẹ daradara:

3. Rii daju pe idanwo ni IE 7 ati IE 8. O le nilo lati ṣatunṣe awọn ọrọ lati ṣe atilẹyin fun wọn bi daradara. Sibẹsibẹ, o ṣiṣẹ nigbati mo dán a wò.

O DARA - eyi ni a gbagbọ. Awọn aaye diẹ diẹ nilo lati ṣe atilẹyin IE 7 tabi 8 mọ, Elo kere si IE6!

Bi iru eyi, ọna yii jẹ apẹrẹ ati pe o ṣe pataki fun ọ. Mo fi i silẹ nihin diẹ bi awoṣe ti iwariiri si bi o ti ni awọn ohun ti o nira siwaju ṣaaju ki gbogbo awọn aṣàwákiri wa dun bẹ dara julọ jọpọ!

Wiwa aworan ti o wa ni oju iwọn Ṣiṣẹ Aaye kekere kan

O le lo ilana ti o jọra si iro kan ti o nà aworan ti o kọja ni ori DIV tabi omiran miiran lori oju-iwe ayelujara rẹ. Eyi jẹ ọna ti o kere ju bi o ti ni lati lo ipo pipe tabi ni awọn oran ti iṣan ajeji fun awọn ẹya miiran ti oju-iwe rẹ.

1. Gbe aworan naa si oju iwe ti Mo fẹ lati lo bi abẹlẹ.

2. Ninu iwe ara, ṣeto iwọn ati giga fun aworan naa. Akiyesi, o le lo awọn ipin ogorun fun iwọn tabi giga, ṣugbọn Mo rii o rọrun lati ṣatunṣe pẹlu awọn ipari iye fun iga.

   img # bg {
   iwọn: 20em;
   iga: 30em;
   }

3. Fi akoonu rẹ sinu ape pẹlu id "akoonu" bi a ti ṣe loke:

   Gbogbo akoonu rẹ nibi

4. Ṣawari akoonu naa lati di iwọn kanna ati giga bi aworan atẹlẹlẹ:

   div # akoonu {
   iwọn: 20em;
   iga: 30em;
   }

5. Lẹhinna gbe akoonu naa si ipo kanna bi aworan naa. Nitorina ti aworan rẹ jẹ 30m o yoo ni ọna ti oke: -30m; Maṣe gbagbe lati fi akọsilẹ z-1 fun akoonu naa.

   #content {
   ipo: ojulumo;
   oke: -30em;
   z-index: 1;
   iwọn: 20em;
   iga: 30em;
   }

6. Lẹhinna fi kun ni a-z-index ti -1 fun awọn olumulo IE 6, bi o ti ṣe loke:

Lẹẹkansi, pẹlu iwọn iboju ti o ni igbadun afẹfẹ lilọ kiri ni atilẹyin fun u bayi, ọna yii jẹ tun ṣe pataki ti o si gbekalẹ bi ọja ti akoko akoko. Ti o ba fẹ lati lo ọna yii, jọwọ rii daju pe idanwo yii ni ọpọlọpọ awọn aṣàwákiri bi o ti le.

Ati pe ti akoonu rẹ ba yipada ni iwọn, iwọ yoo nilo lati yi iwọn ti apo rẹ ati aworan atẹhin, bibẹkọ, iwọ yoo pari pẹlu awọn esi ajeji.