د ویب پاڼې لید لید د پس منظر ګرافونو سره ورکړئ
انځورونه د ګټو ویب پاڼې ډیزاینونو یوه مهمه برخه ده. پدې کې د شاليد انځورونو کارول شامل دي. دا هغه انځورونه او ګرافونه دي چې د یوې پاڼې د شاخصونو په څیر کارول کیږي لکه د انځورونو سره مخالفت چې د منځپانګو پاڼې برخې په توګه وړاندې کیږي. دا پس منظر انځورونه کولی شي د پاڼې لپاره بصری دلچسپي اضافه کړي او تاسو سره د لید بستې ډیزاین سره مرسته وکړي چې تاسو په یوه پاڼه کې لټوئ.
که چیرې تاسو د شاليد انځورونو سره کار پیل کړئ، بې له شکه به په سناریو کې چیرته چیرته چیرته چې تاسو غواړئ یو عکس د پاڼې سره د غزولو لپاره وغواړئ.
دا په ځانګړې توګه د ځواب ویونکو ویب پاڼو لپاره ریښتیا ده چې د ډیری وسیلو او د سکرین اندازو ته رسول کیږي .
د پس منظر انځور پراخولو تمه دا ده چې د ویب ډیزاینرانو لپاره ډیره هیله ده ځکه چې هر انځور د ویب پاڼې په ځای کې ندی. د یوې اندازې اندازې ځای پرځای کولو، د انځور پوښښ ته اجازه ورکوي چې د پاڼې سره سم د فلیکس کولو اجازه ورکړي اجازه نه لري چې د براؤزر کړکۍ پراخ یا محدود وي.
د یوې پاڼې د پس منظر سره د انځور کولو لپاره غوره لاره داده چې د شاليد - انداز لپاره د CSS3 ملکیت کارولو لپاره وي. دلته یو مثال دی چې د یوې پاڼې د بدن لپاره یو پس منظر انځور کاروي او د اندازې اندازه 100٪ ته رسوي ترڅو دا تل د سکرین په مقابل کې ودریږي.
بدن {
پس منظر: url (bgimage.jpg) نه تکرار؛
د پاڼې کچه: 100٪؛
}
د کینیجیوز.com په وینا، دا ملکیت په IE 9+، فایرفوکس 4+، اوپیرا 10.5+، سفاري 5+، کروم 10.5+، او په ټولو لوی موبایل برجونو کې کار کوي. دا نن تاسو ته د موجوده ټولو عصري لارو چارو لپاره پوښښ کوي، پدې معنی چې تاسو باید د دې شتمنۍ څخه پرته له کوم ډار څخه کار واخلئ چې د چا په سکرین کې کار نه کوي.
په زوړ براؤزرونو کې د پیچلې پس منظر ډډه کول
دا امکان نلري چې تاسو د IE9 څخه لوی عمر لرونکي براؤزرونو مالتړ ته اړتیا ولرئ، مګر اجازه ورکړئ چې تاسو اندیښمن یاست چې IE8 د دې ملکیت ملاتړ نه کوي. په دې مثال کې، تاسو کولی شئ یو پراخ پس منظر جعلي کړئ. او تاسو د براؤزر افکسفو لپاره د فایرفوکس 3.6 (-Moz-پس منظر-سائز) او اوپیرا 10.0 (-پس منظر - اندازه) لپاره کاروالی شئ.
د پراخ شوي شاليد انځور جعلي کولو لپاره ترټولو اسانه لاره دا ده چې په ټول مخ کې ودرېږي. بیا تاسو د اضافي ځای سره پای ته نه رسئ یا اندیښنه ولرئ چې ستاسو متن په پراخ ساحه کې ناست دی. دلته دا څنګه کولی شی:
id = "bg" />
- لومړی، ډاډ ترلاسه کړئ چې ټول براؤزرونه د HTML او BODY عناصرو کې 100٪ لوړوالی، 0 نښې، او 0 ګوتې لري. لاندې د خپل HTML سند په سر کې ځای ورکړئ:
- هغه انځور اضافه کړئ چې تاسو یې غواړئ د ویب پاڼې لومړی عنصر په توګه پس منظر وئ، او دا د "bg" id ته ورکړئ:
- د شاليد انځور ځای ونيسئ تر څو چې پورته په پورتنۍ او پاتي وي او 100٪ پراخه او 100٪ لوړوالى ولري. دا د خپل سټاټ پاڼه کې اضافه کړئ:
img # bg {
موقف: ثابت شوی؛
پورته: 0؛
پریښودل: 0؛
چوکۍ: 100٪؛
لوړ والی: 100٪؛
} - د منځپانګې دننه دننه خپل ټول منځپانګې د DIV عنصر دننه د "منځپانګې" د id سره شریک کړئ. د انځور لاندې د DIV اضافه کړئ:
یادونه: دا اوس ستاسو په پاڼه ګورلو کې ډیره زړه ده. انځور باید ښکاره شي، مګر ستاسو محتوا په بشپړه توګه ورک دی. ولې؟ ځکه چې د شاليد انځور د قد په سلو کې 100 دی، او د منځپانګې ویش د سند په جریان کې د انځور څخه وروسته دی - ډیری برګزونه یې دا نه ښکاره کوي.ستاسو ټول مواد دلته دلته - د سرلیکونو، پاراګرافونو، او نور په ګډون
- خپل محتويات وټاکئ ترڅو دا اړونده وي او د Z-index لرونکې وي . دا به دا د معیارونو کې د پس منظر انځور پورته کوي- د مناسب براؤزرونو. دا د خپل سټاټ پاڼه کې اضافه کړئ:
#content {
موقف: نسبتا؛
z-index: 1؛
}
- مګر تاسو نه دي ترسره شوي. انټرنیټ اکسپلورر 6 معیارونه مطابقت نلري او لا هم ځینې ستونزې لري. د هر بریښناليک څخه سی ایس ایس پټولو لپاره ډیری لارې شتون لري مګر IE6، مګر آسانه (د احتمالي نورو ستونزو سبب کیدی شي) د مشروط تبصرې کارولو لپاره وي. ستاسو د شاليد په سر کې ستاسو د شاليد پاڼې وروسته لاندې لاندې کړئ:
- د څرګند شوي تبصرې دننه، د یو بل طرزالعمل سره د نورو شالونو سره اضافه کړئ ترڅو د IE 6 ښه لوبه وکړي:
- ډاډ ترلاسه کړئ چې په IE 7 او IE 8 کې هم ټیسټ وکړئ. تاسو ممکن اړتیا لرئ چې د هغوی ملاتړ وکړئ ترڅو د هغوی ملاتړ وکړئ. مګر، کله چې ما ازموینه وکړه دا کار یې وکړ.
سمه - دا په بشپړ ډول د مخ په زیاتېدو ده. ډیر لږ سایټونه باید د IE 7 یا 8 ملاتړ وکړي، ډیر لږ IE6!
لکه څنګه چې، دا تګلاره ستاسو لپاره بالقوه او احتمالي غیر ضروري ده. زه دلته د ژغورنې نمونې نمونې په توګه دلته پریږدم لکه څنګه چې شیان څومره څه ستونزمن وو ټول زموږ براؤزرانو سره په ګډه سره لوبه کوله!
د کوچنیو ځایونو په اړه د پیچلې پس منظر انځور لرې کول
تاسو کولی شئ د یو ډی اف ډی او یا ستاسو په ویب پاڼې کې بل عنصر کې جعلي انځور جعلي کولو لپاره ورته تخنیک کارولو سره. دا یو څه ستونزمن دی ځکه تاسو باید د مطلق پوست کارولو یا یا د خپل پاڼې د نورو برخو لپاره د مساوي فاصلو مسایل ولرئ.
- انځور په هغه پاڼه کې وساتئ چې زه یې د شاليد په څیر کارول غواړم.
- د طرز په پاڼه کې، د انځور لپاره چوکۍ او لوړوالی مقرر کړئ. یادونه، تاسو د چوکۍ یا لوړوالی لپاره فیصده کارولی شئ، مګر زه دا د اسانتیا لپاره د لمړیو ارزښتونو سره سمون ومومئ.
img # bg {
سورې: 20em؛
د قد اندازه: 30em؛
} - خپل محتوا په دیوې برخې کې د ID "منځپانګې" سره وساتئ لکه څنګه چې پورته یې پورته کړی:
ستاسو ټول مواد دلته
- د منځپانګې ویش د ورته پس منظر انځور په څیر ورته چوکۍ او لوړې وي.
div # content {
سورې: 20em؛
د قد اندازه: 30em؛
} - بیا د محتویاتو په څیر د محتویاتو عین حد ته پورته کړئ. نو که ستاسو عکس 30em وي نو تاسو به د لوړ پوړ لرونکی وی: - 30em؛ مه کوۍ چې د منځپانګې په اړه د Z-index لینک کړئ.
#content {
موقف: نسبتا؛
لوړ: -30یم؛
z-index: 1؛
سورې: 20em؛
د قد اندازه: 30em؛
} - بیا وروسته د IE 6 کاروونکو لپاره د Z-index په اضافه کې اضافه کړئ، لکه څنګه چې تاسو یې پورته کړی:
بیا بیا، د پس منظر اندازې سره چې پراخې برنامه مالتړ ورسره کوي لطفأ کوي، دا طریقه هم ډیره ضروري نده او د ویګین دور د محصول په توګه وړاندې کیږي. که تاسو غواړئ د دې تګالرې څخه کار واخلئ، نو ډاډه یې کړئ چې دا د ډیری براؤزرونو په ازموینې کې ازموینه وکړئ.
او که ستاسو محتوا د اندازې بدلون بدل کړئ نو تاسو به د خپل کانتینر او شاليد انځور بدل کړئ، بلکه، تاسو به عجيب پایلې سره پای ته ورسوئ.