CSS استعمال ڪندي Images سان

اسڪرين جا تصويرون ۽ اسڪرين ۾ تصويرون استعمال ڪريو

ڪيترائي ماڻهو سي ڊي کي استعمال ڪرڻ لاء ٽيڪسٽ کي تبديل ڪرڻ، فونٽ تبديل ڪرڻ، رنگ، سائيز ۽ وڌيڪ. پر هڪ شيء اهو آهي ته ڪيترا ماڻهو اڪثر وساري رهيا آهن ته توهان پڻ تصويرون سان ايس ڊي ايس استعمال ڪري سگهو ٿا.

خودڪار تبديلي تبديل ڪندي

سي ايس توهان کي ترتيب ڏيڻ جي اجازت ڏئي ٿي ته صفحي تي تصوير ڪيئن ڊسپلي ڪندو آهي. اهو توهان جي صفحن جي مسلسل رکندي رکڻ لاء واقعي مفيد ٿي سگهي ٿو. شيلون ترتيب ڏيڻ جي سڀني تصويرن تي، توهان پنهنجي تصويرن لاء هڪ معياري نظر ٺاهي. ڪجھ شيون توھان ٿا ڪري سگھو ٿا:

توهان جي تصوير ڏئي رهيو آهي سرحد ٺاهڻ لاء هڪ وڏو جاء آهي. پر توهان صرف سرحد کان وڌيڪ سوچڻ گهرجي - توهان جي تصوير جي پوري کنڊر جي باري ۾ سوچيو ۽ مارجن ۽ چوٽي کي به ترتيب ڏيو. هڪ تصوير جيڪو پتلي سان ڪٽي سرحد سان لڳندو آهي، پر سرحد جي وچ ۾ ڪجهه ڇانڻ ۽ تصوير به بهتر ڏسڻ ۾ اچي ٿو.

img {
سرحد: 1px ڪارو ڪارو؛
گنجائش: 5px؛
}

اهو هڪ بهترين خيال آهي ته هميشه غير آرائشي تصويرون جوڙي ، جڏهن ممڪن هجي. پر جڏهن توهان ڪندا آهيو، اهو ياد رکو ته اڪثر برائوزرن جي تصوير جي چوڌاري رنگ رنگ جي سرحد شامل ڪريو. اڃا به توهان مٿين ڪوڊ کي سرحد تبديل ڪرڻ لاء استعمال ڪندا آهيو، ڪڙي به مٿي ڪري ڇڏيندو آهي جيستائين توهان ڪڙي تي سرحد ختم يا تبديل ڪريو. هن کي ڪرڻ لاء توهان کي هڪ سي ايس ايس جي ضابطي کي استعمال ڪرڻ گهرجي يا سرحد جي چوڌاري ڳنڍيل تصويرن کي تبديل ڪرڻ لاء:

img> a {
سرحد: ٻيو؛
}

توهان پنهنجي تصويرن جي ڊيگهه ۽ چوٽي کي تبديل ڪرڻ يا سيٽ ڪرڻ لاء پڻ سي ايس استعمال ڪري سگهو ٿا. جڏهن ته برائوزر استعمال ڪرڻ لاء اهو وڏو خيال نه آهي ڇو ته رفتار جي ڊائون لوڊ ڪرڻ لاء، انهن تصويرن جي شڪل ڏيڻ ۾ گهڻو بهتر ٿي رهيا آهن، انهي ڪري اهي اڃا تائين سٺو نظر اچن ٿا. ۽ سي ايس ايس سان گڏ توهان پنهنجي تصويرن کي هڪ معيار جي چوٽي يا اوچائي تي مقرر ڪري سگهو ٿا يا ڪنٽين سان تعلق رکڻ لاء طول و عرض قائم ڪري سگهو ٿا.

ياد رکو، جڏهن تصويرون ٻيهر ڦيرايو، بهترين نتيجا لاء، توهان کي صرف هڪ طول و عرض ڪرڻ گهرجي - اونچائي يا چوٽي. اهو انهي ڳالهه تي قابو پوندي ته تصوير ان جو پاسو رکندو آهي، ۽ ائين عجيب نظر نٿو اچي. ٻئي قيمت آٽو ڏانهن سيٽ ڪريو يا ان کي ٻاهر ڪڍڻ لاء برائوزر کي ٻڌائڻ لاء انهي جو تناسب جهڙي جاري رکڻ لاء.

img {
چوٿون: 50٪؛
اوچائي: آٽو؛
}

CSS3 هن مسئلي جي حل جو نئون جائزو ۽ اعتراض واري جڳهه سان پيش ڪري ٿو. انهن خاصيتن سان توهان کي درست تصوير جي اوچائي ۽ چوٿين کي بيان ڪرڻ جي قابل ٿي سگهندي ۽ انهي جو اندازو اڳتي وڌايو وڃي. اهو شايد توهان جي تصويرن جي چوڌاري خط بڪنگنگ اثرات ٺاهي سگهي ٿو يا ڪٽڻ جي گهربل شڪل ۾ فٽ ڪرڻ لاء تصوير حاصل ڪرڻ لاء.

جڏهن CSS3 اعتراض-فيڪ ۽ اعتراض-پوزيشن جا مالڪ اڃا تائين پيماني تي سهڪار نه ڪيا آهن، ٻيون موجود CSS3 خاصيتون آهن جيڪي تمام جديد برائوزرن ۾ سهڪار وارا آهن جيڪا توهان پنهنجي تصويرن کي تبديل ڪرڻ لاء استعمال ڪري سگهو ٿا. شيون جھڙا ڇانو سوراخ، گول ڪڪر، ۽ تبديلين کي ڦيرايو، ڇڏيندا يا پنھنجي تصويرن کي منتقل ڪن ٿا سڀ کان وڌيڪ جديد جديد برائوزرن ۾. انهي کان پوء توهان تصويرون تبديل ڪرڻ وقت تصويرون تبديل ڪرڻ لاء سي ايس ڊي ٽرانسشن استعمال ڪري سگهو ٿا، يا ڪلڪ ڪيو، يا وقت جي عرصي کان پوء.

پس منظر طور تصوير استعمال ڪريو

CSS توهان جي تصويرن سان فينسي پس منظر ٺاهي ٿي ته انهي کي آسان بڻائي ٿو.

توھان سڄو صفحو يا صرف ھڪ مخصوص عنصر ڏانھن پس منظر شامل ڪري سگھو ٿا. ھن صفحي تي پس منظر واري تصوير واري تصوير سان پس منظر، تصوير جي ملڪيت ٺاھڻ ۾ آسان آھي

جسم {
پس منظر جو عڪس: url (background.jpg)؛
}

جسم جي چونڊيندڙ کي هڪ مخصوص عنصر کي صفحي تي تبديل ڪرڻ لاء صرف هڪ عنصر تي پس منظر کي تبديل ڪرڻ.

هڪ ٻي مزي شيء توهان تصويرن سان ڪري سگهو ٿا پس منظر واري تصوير ٺاهي ٿو جيڪا هن صفحي جي باقي صفحي سان اسڪال نه ڪندو آهي جهڙوڪ واار مارڪيٽ. توهان صرف اسلوب جي پس منظر جو استعمال ڪريو. مقرر ٿيل: مقرر؛ توهان جي پس منظر جي تصوير سان توهان جي پس منظر لاء ٻين اختيارن ۾ انهن کي ٽائل صرف افقي طور تي يا عمدي طور تي پس منظر-ورڇ استعمال ڪري ٽائل ٺاهڻ ۾ شامل آهي.

گراهڪ پس منظر ڏسو: ورجائي-x؛ افقي ۽ پس منظر واري تصوير کي ٽائل ڪرڻ لاء: ورجائي-يار؛ عمدي طور تي ٽائل ٿو. ۽ توهان پنهنجي پس منظر جي تصوير کي پس منظر پوزيشن جي ملڪيت سان ڪري سگهو ٿا.

۽ CSS3 پنهنجي پس منظر لاء پڻ وڌيڪ شئي شامل ڪندو آهي. توهان پنهنجي تصويرن جي سائيز سائيٽن کي پورو ڪري سگهو ٿا يا پس منظر واري تصوير کي ماپ ڪري سائيز سان ماپ ڪري سگهو ٿا. توھان پوزيشن تبديل ڪري سگھو ٿا ۽ پوء پس منظر واري تصوير کي کلپ ڪريو. پر CSS3 بابت هڪ بهترين شيون اهو آهي ته هاڻي توهان مختلف قسم جي پس منظر جون تصويرون کي به وڌيڪ متاثر ٿيندڙ اثر پيدا ڪري سگهو ٿا.

HTML5 اسڪرين تصويرون مدد ڪري ٿي

HTML5 ۾ شکل عنصر ڪنهن به تصويرن جي چوڌاري رکيل هجي جنهن کي دستاويز ۾ اڪيلو بيهڻ گهرجي. انهي جي باري ۾ سوچڻ جو هڪ طريقو اهو آهي ته اها تصوير هڪ ضمير ۾ ظاهر ٿي سگهي ٿي، انهي جي اندر هجڻ گهرجي. توهان وري انهي عنصر ۽ FIGCAPTION عنصر پنهنجي شئي شڪلن کي شامل ڪرڻ لاء استعمال ڪري سگھو ٿا.