پس منظر گرافڪس سان توهان جي ويب سائيٽ بصري دلچسپي ڏي
تصويرون کشش ويب سائيٽ ڊزائن جو هڪ اهم حصو آهن. ھن پس منظر ۾ تصويرن جي استعمال شامل آھي. اهي تصويرون ۽ گرافڪس آهن جيڪي هڪ صفحن جي پويان استعمال ڪندا آهن انهن تصويرن جي مخالفت ڪندا آهن جيڪي مواد جي صفحن جي حصي طور پيش ڪيا ويا آهن. اهي پس منظر تصويرون هڪ صفحو ڏانهن بصري دلچسپي شامل ڪري سگهن ٿا ۽ توهان جي بصري ڊيزائن کي حاصل ڪرڻ ۾ مدد ڪري ٿي جيڪا توهان ڪنهن صفحي تي ڏسي سگهو ٿا.
جيڪڏهن توهان پس منظر جي تصويرن سان ڪم ڪرڻ شروع ڪيو ٿا، توهان کي بائي بجاء هن منظر ۾ هليو ويندو جتي توهان کي تصوير صحيح ڪرڻ لاء تصوير هجي.
اهو خاص طور تي ويب سائيٽن جي لاء خاص آهي ، جيڪو ڊوائيسز ۽ اسڪرين جي سائيز تائين وڏي رينج تائين پهچائي رهيو آهي .
هي پس منظر پس منظر کي وڌائڻ جي خواهشمند ويب ڊزائنر لاء تمام عام خواهش آهي ڇو ته هر تصوير ويب سائيٽ جي جاء تي ناهي. مقرر ٿيل سائيز کي ترتيب ڏيڻ جي بدران، تصوير ڦٽو ڪري ان کي فيچرٽ ڪرڻ جي اجازت ڏئي ٿو ته في الحال براهزر ونڊو ڪروڙ يا تنگ ڪيو وڃي.
ھڪڙي تصوير جي پس منظر کي درست ڪرڻ لاء بهترين طريقو آھي، سائيٽس جي سائيز لاء CSS3 ملڪيت استعمال ڪرڻ آھي. هتي هڪ مثال آهي، جيڪو ڪنهن صفحي جي جسم جي پس منظر واري تصوير کي استعمال ڪندو آهي ۽ سائيز کي 100٪ تائين سيٽ ڪندو آهي، انهي ڪري اهو هميشه هميشه اسڪرين کي فٽ ڪرڻ لاء تيار ٿيندو.
جسم {
پس منظر: url (bgimage.jpg) نه ورجائي؛
پس منظر سائيز: 100٪؛
}
ڪينيئزنس جي مطابق، هي ملڪيت IE 9+، فائر فاکس 4+، اوپيرا 10.5+، سفاري 5+، ڪروم 10.5+، ۽ سڀني وڏن موبائل برائوزر تي. اهو اڄ توهان سڀني جديد برائوزرن لاء اڄ تائين پهچندو آهي، جنهن جو مطلب آهي ته توهان ڪنهن به خوف کان سواء هن ملڪيت کي استعمال ڪرڻ گهرجي، جيڪا ڪنهن شخص جي اسڪرين تي ڪم نه ڪندي.
پراڻن برائوزر ۾ ھڪڙو پس منظر پس منظر لڳائڻ
اهو بلڪل ممڪن آهي ته توهان IE9 کان اڳئين ڪنهن برائوزر جي حمايت ڪرڻ جي ضرورت پوندي، پر اهو سمجهو ته توهان جو انديشو آهي ته IE8 هن ملڪيت جي حمايت نه ڪندو آهي. انهي مثال ۾، توهان هڪ جهڙي پس منظر پس منظر ڪري سگھو ٿا. ۽ توهان برائوزر فريم 3.6 (-موز-پس منظر-سائيز) ۽ اوپيرا 10.0 (-و-پس منظر-سائيز) لاء برائوزر جا فيڪس استعمال ڪري سگهو ٿا.
هڪ وڌايل پس منظر واري تصوير کي جعلي ڪرڻ لاء آسان رستو اهو سڄو صفحي ڀرڻ تائين آهي. پوء توهان اضافي جاء سان ختم نه ڪندا آهيو يا پريشان ٿيڻ گهرجي ته توهان جو متن وڌايل علائقو ۾ وڃي ٿو. هتي ڪيئن ڪجي:
id = "bg" />
- پهرين، پڪ ڪرڻ گهرجي ته سڀني برائوزرن ۽ HTML ايجاد عناصر تي 100٪ اوچائي، 0 مکيه، ۽ 0 لڳل آهن. پنهنجي HTML دستاويز جي سر ۾ هيٺ ڏنل جڳھ رکو.
- تصوير شامل ڪريو جيڪو توھان کي صفحي جي پھرين عنصر جي پس منظر بڻجڻ چاھيو ٿا، ۽ ان کي "بگ" جو بت ڏيو.
- پس منظر واري تصوير کي پوزيشن ڏيان ٿو ته اهو طئي ڪيو ويو آهي ۽ کاٻي پاسي ۽ 100٪ وڏن ۽ ڊيگهه 100٪ آهي. ھن کي پنھنجي انداز واري شيٽ ۾ شامل ڪريو
img # bg {
پوزيشن؛ مقرر ٿيل؛
مٿي: 0؛
کاٻي: 0؛
چوٿون: 100٪؛
اوچائي: 100٪؛
} - DIV عنصر جي اندر واري مواد کي پنهنجي مواد کي "مواد" جي سڃاڻ سان شامل ڪريو. تصوير هيٺ ڏنل DIV شامل ڪريو
نوٽ: اهو هاڻي توهان جي صفحي کي ڏسڻ لاء دلچسپ آهي. تصوير وڌايو وڃي ٿو، پر توهان جو مواد مڪمل طور تي غائب آهي. ڇو؟ ڇو جو پس منظر جي تصوير اونچائي ۾ 100٪ آهي، ۽ مواد ڊويزن دستاويز جي وهڪري جي تصوير کان پوء آهي - گهڻن برائوزر ان کي ظاهر نه ڪندو.توھانجي سڀ مواد ھتان - مٿو، پيراگراف، وغيره شامل آھن.
- توھانجو مواد کي جڳھ ڪريو ته اھو مائٽ آھي ۽ 1 جي ز واري انڊسٽري آھي. اھو ان کي معيار جي مطابق ڏنل پس منظر جي تصوير آڻيندو. ھن کي پنھنجي انداز واري شيٽ ۾ شامل ڪريو
#content {
جڳهه؛ مائٽ؛
Z-index: 1؛
}
- پر توهان نه ڪيو آهي. انٽرنيٽ ايڪسپلورر 6 معيار مطابق نه آهي ۽ اڃا ڪجهه مسئلا آهن. هر برائوزر کان ايس ايس سي لڪائڻ لاء ڪيترائي طريقا آهن پر IE6، پر آسان (۽ گهٽ ۾ گهٽ ٻين مشڪلات جو سبب) سان مشروط راء استعمال ڪرڻ آهي. توھان جي دستاويز جي سرٽيفڪيٽ ۾ ھيٺ ڏنل ھيٺيون پوسٽ ڪريو.
- نمايان ٿيل تبصرو جي اندر، ڪجهه شاليز سان ٻيو انداز شيٽ شامل ڪريو IE 6 لڳ ادا ڪرڻ لاء:
- انهي سان گڏ امتحان ڏيڻ ۾ IE 7 ۽ IE 8 ۾ جاچ ڪرڻ. توهان کي انهن جي حمايت لاء پڻ تبصرا ترتيب ڏيڻ جي ضرورت آهي. جڏهن ته مون ان کي آزمائي ڪيو، اهو ڪم ڪيو.
ٺيڪ آھي، اھو منظور ڪيو ويو آھي. تمام گھٽ ٿورن سائيٽن کي IE 7 يا 8 وڌيڪ سپورٽ ڪرڻ جي ضرورت آهي، گهڻو گهٽ IE6!
جيئن ته، هي نقطہ نظر قديم ۽ ممڪن آهي توهان جي لاء لازمي آهي. مان هتي ان کي وڌيڪ تجسس جي نموني طور ڇڏي ڏيان ٿو جيئن ڪيترو ڏکيو شيون اڳ اسان جي برائوزرن کي گڏوگڏ تمام گهڻو گڏ ٿي ويا!
ننڍي اسپائيٽ تي ھڪڙو پس منظر واري تصوير جي فوٽو
توهان هڪ ويب ٽيڪنٽ تي هڪ پس منظر واري تصوير کي ڦهلائڻ لاء هڪ ساڳي ٽيڪنڪ استعمال ڪري سگهو ٿا يا توهان جي ويب صفحي تي ٻي عنصر. اهو هڪڙو چٽيندڙ آهي جيئن توهان کي پوزيشن کي استعمال ڪرڻو آهي يا توهان جي صفحي جي ٻين حصن لاء عجيب فاصلو مسئلا آهي.
- صفحي جي تصوير کي ڏسو ته آئون پسمنظر طور استعمال ڪرڻ چاهيندس.
- اسلوب شيٽ ۾، تصوير لاء چوٿون ۽ اوچائي مقرر ڪريو. نوٽ، توهان چوٿين يا اونچائي لاء فيصد استعمال ڪري سگهو ٿا، پر مون کي انهي کي ڊيگهه جي ڊيگهه جي ڊيگهه سان آسان ڪرڻ سان آسان سمجهيو.
img # bg {
چوٿون: 20em؛
اوچائي: 30em؛
} - پنھنجي مواد کي ھڪڙو جڳھ ۾ "مواد" سان گڏ جڳھ طور تي اسان مٿي ڪيو آھي:
هتي توهان جو سڀ مواد
- اسڪرين واري مواد کي ڊاهي ساڳيو چوٽي ۽ اوچائي پس منظر جي تصوير طور
div # مواد {
چوٿون: 20em؛
اوچائي: 30em؛
} - پوء انهي عروج تي مواد جي حيثيت سان مواد کي پوزيشن ڪريو. پوء جيڪڏهن توهان جي تصوير 30em آهي ته توهان وٽ ضرور هڪ طريقو آهي: -30em؛ مواد تي 1 جي ز-انڊسٽري رکڻ نه وساريو.
#content {
جڳهه؛ مائٽ؛
مٿي: -30م؛
Z-index: 1؛
چوٿون: 20em؛
اوچائي: 30em؛
} - ان کان پوء IE-6 جي استعمال ڪندڙن جي هڪ اي-1 انڊسٽري ۾ شامل ڪيو، جيئن توهان مٿي ڪيو آهي:
انهي کان پوء، پس منظر سائيز سان وسيع برائوزر جي سهولت حاصل ڪندي اهو هاڻي ڏسندو آهي، اهو اچڻ به تمام ضروري آهي ۽ بائيو دور جي پيداوار جي طور تي پيش ڪيو ويندو آهي. جيڪڏهن توهان هن نقشن کي استعمال ڪرڻ چاهيندا، رڳو انهي کي برائوزرن ۾ توهان جاچ ڪري هن کي امتحان ڪرڻ جي پڪ ڪريو.
۽ جيڪڏهن توهان جو مواد سائيز ۾ تبديل ڪيو وڃي، توهان کي پنهنجي کنٽين ۽ پس منظر جي شڪل کي تبديل ڪرڻو پوندو، ٻي صورت ۾، توهان کي عجيب نتيجا سان ختم ڪنداسين.