Nola estekatu irudi baten irudia Web orri bat egokitzeko

Eman zure webgunearen ikusizko interesa background grafikoekin

Irudiak web diseinu erakargarrien zati garrantzitsu dira. Honek background irudiak erabiltzea dakar. Hauek dira orrialde baten atzean erabiltzen diren irudiak eta grafikoak, edukiaren orrialdeetan aurkezten diren irudien aurrean. Atzeko planoko irudiek orrialde baten ikusizko interesak gehi ditzakete orri batean bilatzen ahal duzun bisualizazio diseinua lortzeko.

Atzeko planoko irudiekin lanean hasten bazara, irudia handitu egingo da orrialdean sartzeko.

Hau bereziki egia da gailu eta pantailako tamainu handietarako entregatu diren webgune sentikorretarako.

Atzeko planoa luzatzeko nahia hau web diseinatzaileen nahia oso ohikoa da, ez baita irudi bat webgune baten espazioan egokitzen. Tamaina finkoa ezartzean, irudia luzatzeko aukera ematen du orriari egokitzeko , arakatzailearen leihoaren zabalera zein estua den .

Orrialde baten atzeko planoari doitzeko irudi bat luzatzeko modurik onena CSS3 propietatea erabiltzea da, hondoan. Hona hemen orri baten gorputz atzeko irudia erabiltzen duen adibide bat eta% 100rako tamaina ezartzen duenez, beti pantailara egokitzeko.

gorputza {
atzeko planoa: url (bgimage.jpg) no-repeat;
atzeko planoko tamaina:% 100;
}

Caniuse.com-en arabera, jabetza honek IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ eta mugikorreko arakatzaile nagusietan funtzionatzen du. Horrek gaur egungo arakatzaile modernoak eskaintzen dizkizu, eta horrek esan nahi du jabetza hau erabili behar duzula beldurrik gabe, inork ez duela pantailan lan egingo.

Atzeko plano estandarra egitea nabigatzaile zaharrenetan

Ezinezkoa da IE9 baino zaharragoak diren nabigatzaileei laguntza ematea, baizik eta kontuan hartu IE8k ez duela jabetza onartzen. Kasu horretan, luzatutako atzeko planoa faltsu dezakezu. Firefox 3.6 (-moz-background-size) eta Opera 10.0 (-o-background-size) arakatzailearen aurrizkiak erabil ditzakezu.

Estalitako atzeko planoko irudia faltsutzeko modurik errazena da orrialde osoan luzatzea. Ondoren, ez duzu espazio gehiagorik amaituko edo zure testua luzatu egingo dela uste baduzu. Hona hemen nola egin:

id = "bg" />

1. Lehenik eta behin, ziurtatu arakatzaile guztiek% 100eko altuera, 0 marjinak eta 0 betegarria izan behar dituztela HTML eta BODY elementuetan. Egin ondoko zure HTML dokumentuaren buruan:

2. Atzeko planoa web orriko lehen elementu gisa erabili nahi duzun irudia gehitu eta eman "bg" id :

3. Kokatu atzeko planoko irudia goian eta ezkerretan konponduta eta% 100eko zabalera eta% 100eko altuera. Gehitu hau zure estilo-orrian:

   img # bg {
   posizioa: finkoa;
   top: 0;
   ezkerrera: 0;
   zabalera:% 100;
   altuera:% 100;
   }

4. Gehitu edukia DIV elementu baten barruan "edukia" id batekin. Gehitu irudiaren azpiko DIVa:

   Zure edukia hemen - goiburuak, paragrafoak eta abar barne.

   Oharra: interesgarria da orain zure orrialdean begiratzea. Irudia luzatu behar da, baina zure edukia erabat falta da. Zergatik? Atzeko planoko irudia% 100eko altuera dela eta edukien zatiketa dokumentuaren fluxuan dagoenaren ondoren dago. Nabigatzaile gehienek ez dute erakutsiko.
   
5. Kokatu zure edukia erlatiboa dela eta z-indize bat duen 1. Honek atzeko planoko irudia goiko estandar betetzen duen arakatzailean eramango du. Gehitu hau zure estilo-orrian:

   #content {
   posizioa: erlatiboa;
   z-indizea: 1;
   }

1. Baina ez zara egin. Internet Explorer 6 ez da estandarrak betetzen eta arazo batzuk izaten jarraitzen du. Hainbat modu daude CSS ezkutatzeko nabigatzaile guztietan, baina IE6, baina errazena (eta gutxienez beste arazo batzuk sor ditzake) baldintzazko iruzkinak erabiltzea da. Jarri honako zure estilo-orriaren ondoren zure dokumentuaren buruan:

2. Nabarmendutako iruzkina barruan, gehitu estilo-orri bat estilo batzuekin IE 6 erreproduzitzeko:

3. Ziurtatu IE 7 eta IE 8 probatu ere. Baliteke iruzkinak ere egokitu behar izatea. Hala ere, probatu nuenean lan egin nuen.

Ados - hori modu onez betea da. Oso gutxi guneek IE 7 edo 8 gehiago behar dituzte, askoz gutxiago IE6!

Horrela, hurbilketa hau zaharkituta dago eta zuretzako beharrezkoak ez direnak. Hemen utzi dut gehiago jakin-minez eredu gisa zenbat zailtasun gehiago izan ziren gure arakatzaile guztiek aurretik jokatu hain ondo elkarrekin!

Estalitako atzeko planoa irudi txikia egitea Espazio txikiagoan

DIV edo beste elementu bat zure web orrian zehar luzatutako atzeko planoko irudia faltsutzeko antzeko teknika erabil dezakezu. Hau bitxiagoa da, kokapen absolutua erabiltzea edo orriaren beste atal batzuekin alderaketa arraroak edukitzea.

1. Jarri atzeko plano gisa erabili nahi dudan orrialdearen irudia.

2. Estilo-orrian, ezarri zabalera eta altuera irudiari. Oharra: zabalera edo altuera portzentajeak erabil ditzakezu, baina altuera altuera duen luzera doitzeko errazago aurkitzen dut.

   img # bg {
   zabalera: 20em;
   altuera: 30em;
   }

3. Jarri zure edukia div bat "edukia" idazten dugun bezala:

   Zure edukia hemen

4. Estiloa edukiaren diametroa atzeko planoko zabalera eta altuera berdina izan dadin:

   div # edukia {
   zabalera: 20em;
   altuera: 30em;
   }

5. Ondoren, kokatu edukia irudiaren altuera berera. Beraz, zure irudia 30 urtekoa bada, goiko estiloa izango duzu: -30em; Ez ahaztu 1 edukien aurkibidea z indexatzeko.

   #content {
   posizioa: erlatiboa;
   top: -30em;
   z-indizea: 1;
   zabalera: 20em;
   altuera: 30em;
   }

6. Ondoren, gehitu indize z -1 -1 IE 6 erabiltzaileei, goian aipatu bezala:

Berriz ere, atzealdeko tamaina duen arakatzailearen euskarri zabala daukan euskarriaz gozatzen duenez, ikuspuntu hau ere oso beharrezkoa ez den eta garai bateko produktu gisa aurkezten da. Ikuspegi hau erabili nahi baduzu, ziur egon probatu ahal duzun nabigatzaile guztietan.

Zure edukia tamaina aldatzen bada, zure edukiontziaren tamaina eta atzeko planoko irudia aldatu beharko dituzu, bestela, emaitzak arraroekin amaituko dituzu.