آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 9) : ویژگی background-clip و background-repeat

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۲۸ بهمن ۱۳۹۵

css3 attributes

ویژگی background-clip

این ویژگی منطقه ای از المنت که پس زمینه به اون اعمال میشه رو مشخص میکنه. همانند بعضی از ویژگی‌های دیگه این مورد هم از CSS Box Model تبعیت میکنه. شما میتونین کاری کنید که تصویر پس زمینه حتی زیر Border هم بره و یا کاری کنید که فقط قسمت محتوا و Content و یا حتی متن رو پوشش بده. این ویژگی 4 مقدار مهم داره که در زیر اونا رو بررسی میکنیم. کد زیر رو در نظر بگیرید:

.container {
	background-clip: border-box;
	background-color: #ffdb3a; 
	border: 10px dotted black; 
	padding: 20px;
}
  • border-box : این مقدار، مقدار پیش فرض هست و اجازه میده که پس زمینه المنت رو بصورت کامل پوشش بده و حتی زیر border هم بره. در این حالت خروجی بصورت زیر میشه:background clip 1 همونطور که دیدید، border رو بصورت خط چین قرار دادیم تا متوجه بشید که پس زمینه حتی زیر border هم رفته.
  • padding-box : با این مقدار به پس زمینه میگیم که فقط تا لبه نهایی padding رو پوشش بده و به محدوده border وارد نشو. پس در این حالت پس زمینه زیر border نمیره. خروجی بصورت زیر میشه:background clip 2
  • content-box : با این مقدار، پس زمینه فقط به محدوده content یا محتوا که درون padding هست، اعمال میشه. خروجی بصورت زیر میشه:background clip 3
  • text : با استفاده از این مقدار به پس زمینه میگید که فقط متن رو پوشش بده و به بقیه جاها کاری نداشته باش. این حالت یک مقدار خاص هست و باید از -webkit- استفاده کنید و مقدار ویژگی color رو برابر با transparent قرار بدین. با این کار میتونین افکتهای بسیار زیبایی برای متن قرار بدین. دموی زیر رو ببینید و از اون ایده بگیرید:

به همین راحتی میتونین از این ویژگی استفاده کنید.

ویژگی background-repeat

همونطور که میدونین سایز تصویری که برای المنت با استفاده از ویژگی background-image قرار میدیم، با استفاده از ویژگی background-size مشخص میشه و بعد از اون با استفاده از background-position هم موقعیت اون معلوم میشه. بعد از اینکه همه محاسبات انجام شد حالا شما میتونین با استفاده از ویژگی background-repeat مشخص کنید که تصویر مورد نظر چطور کنار هم چیده بشه و کل سطح المنت رو بپوشانه. این ویژگی مقادیری رو قبول میکنه که در زیر اونا رو با هم بررسی میکنیم. کد زیر رو در نظر بگیرید:

.container {
    background-image:  url(ng.png);;
    background-repeat: repeat;
}
  • repeat : مقدار پیش فرض این ویژگی هست و در این حالت پس زمینه هم در حالت افقی و هم در حالت عمودی تکرار میشه و کل المنت رو پوشش میده. شما میتونین بجای repeat از repeat repeat هم استفاده کنید ولی چون دو مقدار افقی و عمودی برابر بود، یکبار بنویسیم کافی هست. خروجی بصورت زیر میشه:background repeat 1
  • repeat-x : در این حالت تصویر پس زمینه فقط در جهت افقی تکرار میشه. این مقدار و مقدار repeat-y رو نمیتونین بصورت دوتایی قرار بدین. خروجی بصورت زیر میشه:background repeat 2
  • repeat-y : در این حالت تصویر پس زمینه فقط در جهت عمودی تکرار میشه. خروجی:background repeat 3
  • no-repeat : با اینکار مثل این میمونه که مقدار no-repeat no-repeat رو قرار داده باشید و تصویر مورد نظر در هیچ سمتی تکرار نمیشه. خروجی بصورت زیر میشه:background repeat 4
  • space : در این حالت مثل این میمونه که مقدار space space رو برای هر دو جهت قرار داده باشید. این مقدار باعث میشه که هیچ کدوم از تصاویر بصورت ناقص نمایش داده نشن و تا حد ممکن هم قرار داده بشن. بعد از اون هر چی فضای خالی باقی بمونه، بین اونا تقسیم میشه و بینشون فاصله میوفته. اولین و آخرین تصویر به گوشه‌ها میچسبن. خروجی بصورت زیر هست:background repeat 5
  • round : در این حالت مثل این میمونه که مقدار round round رو برای هر دو جهت قرار داده باشید. در این حالت تصاویر مورد نظر به اندازه ای کش میان و بزرگ میشن تا بتونن همه فضا رو اشغال کنن. در این حالت هم نباید هیچ کدام از تصاویر بریده بشن. خروجی بصورت زیر میشه:background repeat 6

علاوه بر مقادیر بالا که میتونستین بصورت تکی از اونا استفاده کنیم، میتونیم بصورت ترکیبی هم از اونا استفاده کنیم و استایل رو برای جهت افقی و عمودی، متفاوت در نظر بگیریم. بجز موارد repeat-x و repeat-y، از بقیه میتونیم بصورت همزمان استفاده کنیم. موارد زیر رو در نظر بگیرید:

  • space repeat : با این کار جهت افقی بصورت Space در میاد و جهت عمود هم تصویر مورد نظر تکرار میشه. خروجی:background repeat 7
  • round no-repeat : اینم که دیگه کاملا واضخ هست. خروجی بصورت زیر میشه:background repeat 8

بهمین راحتی میتونیم با این ویژگی کار کنیم. خسته نباشید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

اولین دیدگاه این پست رو تو بنویس !