چطور رنگ پس زمینه را تغییر دهیم؟ چگونه تصویر برای پس زمینه قرار بدیم؟ مثال برای بک گراند چیا میتونیم بگیم؟ چند تا مثال واسه بک گراند!! در این مقاله با هم مثال های کاربردی در رابطه با پس زمینه ها را بررسی میکنیم.
سرفصلهای پست
یاد آوری مبحث پس زمینه
در جلسه قبل یعنی استایل background در CSS ، با هم مفاهیم اصلی پس زمینه رو یاد گرفتیم.
فهمیدیم که چطور پس زمینه رنگ یا تصویر قرار بدیم، چطور پس زمینه رو در راستا های مختلف تکرار کنیم، چطور سایز و اندازش رو تغییر بدیم و غیره!
تو این جلسه، با هم چند مثال کاربردی از مبحث پس زمینه یا همون background رو بررسی میکنیم.
مثال هایی که بررسی میکنیم، دارای کد های خلاصه شده هستن، یعنی با کپی پیست کردن اون ها تو ادیتوراتون به نتیجه مطلوب نمیرسین. هدف از این مقاله، فقط بررسی نقش دستورات مربوط به پس زمینه تو مثال های مختلف هست و لازم نیست با کد هایی که براتون ابهام انگیزن، سر و کله بزنین 🙂
مثال ها
مثال ۰: پس زمینه تمام صفحه
تو این مثال، پس زمینه تمام صفحه رو بررسی میکنیم.
همونطور که از اسمش پیداست، پس زمینه ای هست که میتونه تمام صفحه ما رو پوشش بده.
به مثال زیر و کد اون توجه کنین:
body{ background-image:url('town.jpg'); background-size: cover; }
همونطور که میبینین، پس زمینه مستقیما روی عنصر body تنظیم شده.
مثال ۱: پس زمینه فیکس شده
تو جلسه قبل، دیدیم که میتونیم با استفاده از خاصیتی به اسم background-attachment، پس زمینه هایی رو تنظیم کنیم که دارای ویژگی fixed هستن. یعنی چی؟
یعنی با اسکرول کردن سر جای خودشون میمونن و حرکت نمیکنن!
به مثال زیر توجه کنین:
همونطور که میبینیم، با یه وب سایتی روبرو هستیم که با اسکرول کردن به سمت پایین، عکس ما بالا نمیره.
این سبک از تصاویر پس زمینه به راحتی با کد HTML و CSS زیر امکان پذیره:
<header> کد های مفصل مربوط به عناصر </header>
header{ background-image: url('medical.jpg'); background-attachment: fixed; }
مثال ۲: پس زمینه شفاف
پس زمینه شفاف چیه؟ خیلی جا ها ما برای بهتر شدن رابط کاربری وب سایتمون، اقدام به دستکاری شفافیت قسمت های مختلف سایتمون میکنیم، جوری که معلوم باشه پشت سر اون قسمت چیه!
یکی از قسمت هایی که دستکاری شفافیت اون رو خوشگل میکنه، تصاویر پس زمینه وب سایتمونه. چجوری؟
به مثال زیر توجه کنین:
همونطور که تو مثال فوق میبینیم، تونستیم توسط یه پس زمینه شفاف، جلوه خوبی به وب سایتمون بدیم.
اگه پس زمینه خیلی زیاد شفاف باشه، عناصر form به سختی دیده میشن که اصلا به مذاق کاربر سایت خوش نمیاد!
اگه کاملا مات باشه و مشکی هم باشه، چندان تو دل برو نیست و سایت رو بد ترکیب میکنه.
برای ساختن پس زمینه شفاف بالا از کد HTML و CSS ساده زیر استفاده میشه:
<form> <input type="text" placeholder="Please enter your name..."> <input type="password" placeholder="Please enter your password..."> <input type="submit"> </form>
form{ background-color: rgba(0,0,0,0.6); }
مثال ۳: پس زمینه تاریک
حالا تو این مثال، میخوایم بررسی کنیم که چطور میتونیم یک پس زمینه تاریک برای عنصرمون تدارک ببینیم؟
به مثال زیر توجه کنین:
همونطور که میبینیم، با مثال قبل طرفیم، با این تفاوت که به جای تدارک دیدن یک پس زمینه شفاف و تیره برای form، مستقیما پس زمینه کلی رو تاریک کردیم.
اما این تاریک کردن به چه شکلی انجام شده؟
به کد HTML و CSS زیر توجه کنین:
<form> <input type="text" placeholder="Please enter your name..."> <input type="password" placeholder="Please enter your password..."> <input type="submit"> </form>
body{ background: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('sunset.jpg'); background-size: cover; background-position: center; }
اینجا کافیه از ترکیب دو مقدار linear-gradient و url استفاده کنیم.
نکته: ترکیب این دو، به صورت مستقیم و اصلی برای تاریک کردن عکس ها به کار نمیره، اما روش فرعی و فوق العادهای هست که خیلی جا ها ممکنه به کارتون بیاد!
مثال ۴: پس زمینه پویا
تو این مثال، با استفاده از CSS animations، یه پس زمینه ی پویا طراحی کردیم که طی مدت زمان کوتاهی، رنگش رو تغییر میده.
dark
و جالبه بدونین که این ساده ترین مثال از پس زمینه های پویاست.
نتیجه گیری
خب، به انتهای این فصل رسیدیم، امیدوارم که بهره ی کافی رو برده باشید 🙂 در این فصل با پس زمینه (پیش زمینه یا Background) آشنا شدیم و مثال های کاربردی مختلفی را با همدیگه بررسی کردیم. جالبه بدونید در طراحی های امروزی در بیشتر مواقع از پس زمینه های خیلی ساده و با رنگ های Flat استفاده میشود و به جهت افزایش سرعت سایت سعی میشود کمترین حجم را برای صفحه ایجاد کنند.
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزشها دارین، خیلی خیلی خوشحال میشیم که اون رو در بخش دیدگاههای پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی / متخصص و برنامه نویس
10 پاسخ
سلام و خسته نباشید. خیلی ممنون و متشکرم از سایت خوبتون. من مشکل پس زمینه تاریک که داشتم با کدهای شما حل شد.
سلام خواهش میکنیم 🙂 خداروشکر
سلام خوبین من کدی که واسه ساخت فورمبرای بک گراند شفافکه گفتین رو میزنم ولی فورم در یک خط و وداخل کادر users nameو password کاملا سفید در میاد علتش چیه؟
سلام ابوالفضل. خب کاملا طبیعیه 🙂 چون کد ناکامله، ناکامل گفتیم که بتونی مفهومی روش کار کنی و راحت تغییرش بدی.
مثلا این مثال که برات اماده کردم رو ببین. از کد مقاله استفاده کردم و یک بک گراند شفاف برای فرمم ساختم. مثلا توام میتونی به جای بک گراند سرمه ای تمام صفحه، یه عکس قرار بدی و تغییرات رو ببینی 🙂
سلام ممنون از سایت خوبتون .
میشه لطفا کدهای کامل پس زمینه تاریک رو بگین ؟
سلام
این شاید به دردت بخوره:
سلام وقتی بکگراند سایز رو روی حالت کاور میزارم عکس بیش از حد بزرگ میشه و کیفیتش میاد پایین میشه راهنمایی کنین ممنون
سلام آیدا. کیفیت عکس در تمام مرورگر ها به این شکله یا فقط در یک مرورگر خاص؟
اگر مسئله اوله، ربطی به بک گراند سایز نداره و علتش کیفیت خود عکسه. سعی کن عکس با کیفیت تری برای بکگراندت استفاده کنی.
سلام ممنون از سایت خوبتون .
میشه لطفا کدهای کامل پس زمینه شفاف رو بگین ؟
سلام زهرا. کدای کاملش که یخورده زیاده، ولی میتونم تا حدی راهنماییت کنم که خودت مطابق با چیزی که میخوای تغییرش بدی و یاد بگیری
یه تگ فرم مثل مثال های مقاله تعریف کن و کد های CSS زیر رو بهش اعمال کن: