پس زمینه ها

پادکست CSS - 053: Background

پس زمینه ها

پشت هر جعبه CSS یک لایه تخصصی به نام لایه پس زمینه وجود دارد. CSS راه‌های مختلفی را برای ایجاد تغییرات معنی‌دار در آن ارائه می‌کند - از جمله اجازه دادن به پس‌زمینه‌های متعدد.

لایه‌های پس‌زمینه دورتر از کاربر هستند و در پشت محتویات یک جعبه با شروع از ناحیه padding-box آن ارائه می‌شوند. این باعث می شود که لایه پس زمینه به هیچ وجه با حاشیه ها همپوشانی نداشته باشد.

رنگ پس زمینه

یکی از ساده ترین افکت هایی که می توانید روی لایه پس زمینه اعمال کنید، تنظیم رنگ است. مقدار اولیه background-color transparent است، که به محتویات یک والد قابل مشاهده است. یک مجموعه رنگ معتبر روی یک لایه پس‌زمینه در پشت سایر چیزهایی که روی آن عنصر نقاشی شده‌اند قرار می‌گیرد.

تصاویر پس زمینه

در بالای لایه background-color ، می‌توانید با استفاده از ویژگی background-image یک تصویر پس‌زمینه اضافه کنید. یک background-image موارد زیر را می پذیرد:

• URL تصویر یا URI داده با استفاده از تابع CSS url .
• تصویری که به صورت پویا توسط یک تابع CSS گرادیان ایجاد می شود.

تنظیم یک تصویر پس زمینه با تابع CSS url

پس زمینه های گرادیان CSS

چندین تابع گرادیانت CSS وجود دارد که به شما امکان می‌دهد پس‌زمینه-تصویر را با عبور از دو یا چند رنگ ایجاد کنید.

صرف نظر از اینکه کدام تابع گرادیان استفاده می شود، تصویر حاصل به طور ذاتی اندازه می شود تا با مقدار فضای موجود مطابقت داشته باشد.

نسخه ی نمایشی نمونه ای از اعمال یک تصویر پس زمینه با استفاده از توابع گرادیان:

تکرار تصاویر پس زمینه

به طور پیش فرض، تصاویر پس زمینه به صورت افقی و عمودی تکرار می شوند تا کل فضای لایه پس زمینه را پر کنند.

این مورد را با استفاده از ویژگی background-repeat با یکی از مقادیر زیر تغییر دهید:

• repeat : تصویر در فضای موجود تکرار می شود و در صورت لزوم برش می شود.
• round : تصویر به صورت افقی و عمودی تکرار می شود تا به همان تعداد نمونه در فضای موجود قرار گیرد. با افزایش فضای موجود، تصویر کشیده می‌شود و پس از کشیده شدن نیمی از عرض اصلی تصویر، فشرده می‌شود تا نمونه‌های تصویر بیشتری اضافه شود.
• space : تصویر به صورت افقی و عمودی تکرار می شود تا به تعداد نمونه های موجود در فضای موجود بدون برش قرار گیرد—در صورت نیاز بین نمونه هایی از تصویر فاصله بگیرید. تصاویر تکراری لبه‌های فضایی را که یک لایه پس‌زمینه اشغال می‌کند لمس می‌کند، با فضای سفید به طور مساوی بین آنها توزیع شده است.

ویژگی background-repeat به شما امکان می دهد رفتار محور x و y را به طور مستقل تنظیم کنید. پارامتر اول رفتار تکرار افقی را تنظیم می کند و پارامتر دوم رفتار تکرار عمودی را تنظیم می کند.

اگر از یک مقدار استفاده می کنید، این مقدار برای هر دو تکرار افقی و عمودی اعمال می شود.

کوتاه‌نویسی همچنین گزینه‌های راحت یک کلمه‌ای دارد تا منظور شما را واضح‌تر نشان دهد.

مقدار repeat-x یک تصویر را فقط به صورت افقی تکرار می کند. این معادل repeat no-repeat است.

نسخه ی نمایشی زیر این قابلیت های ویژگی background-repeat را نشان می دهد:

موقعیت پس زمینه

ممکن است متوجه شده باشید که وقتی برخی از تصاویر در وب با یک background-repeat: no-repeat ، چنین تصاویری در بالا سمت چپ ظرف خود نمایش داده می‌شوند.

موقعیت اولیه تصاویر پس زمینه بالا سمت چپ است. ویژگی background-position به شما این امکان را می دهد که این رفتار را با تغییر موقعیت تصویر تغییر دهید.

همانند background-repeat ، ویژگی background-position به شما امکان می‌دهد تصاویر را در امتداد محور x و y به طور مستقل با دو مقدار به طور پیش‌فرض قرار دهید.

وقتی از طول ها و درصدهای CSS استفاده می شود، پارامتر اول مربوط به محور افقی است در حالی که پارامتر دوم مربوط به محور عمودی است.

وقتی کلمات کلیدی فقط استفاده می شوند ترتیب کلمات کلیدی مهم نیست:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

ویژگی background-position همچنین دارای یک مختصر یک مقدار مناسب است. مقدار حذف شده تا 50% حل می شود. در اینجا یک مثال است که این را با استفاده از کلمات کلیدی که ویژگی background-position می پذیرد نشان می دهد:

علاوه بر فرم پیش فرض دو پارامتر و فرم یک پارامتر. ویژگی background-position نیز تا چهار پارامتر را می پذیرد.

هنگامی که از سه یا چهار پارامتر استفاده می شود، یک طول یا درصد CSS باید قبل از کلیدواژه های top ، left ، right یا bottom باشد تا مرورگر محاسبه کند که آفست باید از کدام لبه جعبه CSS منشا گرفته شود.

هنگامی که از سه پارامتر استفاده می شود، طول یا مقدار CSS می تواند دومین یا سومین پارامتر باشد و دو مورد دیگر کلیدواژه باشند. کلمه کلیدی که موفق می شود برای تعیین لبه ای که طول یا مقدار CSS مربوط به افست بودن آن است استفاده می شود. افست کلمه کلیدی دیگر مشخص شده روی 0 تنظیم شده است.

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

اگر background-position: top left 20% بر روی یک تصویر پس‌زمینه CSS اعمال شود، تصویر در بالای کادر قرار می‌گیرد، مقدار 20% نشان‌دهنده یک افست 20% از سمت چپ کادر (در محور x) است.

اگر background-position: top 20% left بر روی یک تصویر پس‌زمینه CSS اعمال شود، مقدار 20% نشان‌دهنده یک افست 20% از بالای کادر CSS (در محور y) است و تصویر در سمت چپ تصویر قرار می‌گیرد. جعبه

هنگامی که از چهار پارامتر استفاده می شود، دو کلمه کلیدی با دو مقدار مربوط به یک افست در برابر مبدا هر کلمه کلیدی مشخص شده جفت می شوند. اگر background-position: bottom 20% right 30% روی تصویر پس‌زمینه اعمال شود، تصویر پس‌زمینه 20% از پایین و 30% از سمت راست کادر CSS قرار می‌گیرد.

دمو زیر این رفتار را نشان می دهد:

در اینجا نمونه های بیشتری از استفاده از ویژگی background-position با استفاده از ترکیبی از مقادیر CSS و کلمات کلیدی آورده شده است:

اندازه پس زمینه

ویژگی background-size اندازه تصاویر پس زمینه را تعیین می کند. به طور پیش فرض تصاویر پس زمینه بر اساس عرض، ارتفاع و نسبت ابعاد ذاتی (واقعی) آنها اندازه می شوند.

ویژگی background-size از مقادیر طول و درصد CSS یا کلمات کلیدی خاص استفاده می کند. این ویژگی حداکثر دو پارامتر را می پذیرد که به شما امکان می دهد عرض و ارتفاع پس زمینه را به طور مستقل تغییر دهید.

ویژگی background-size کلمات کلیدی زیر را می پذیرد:

• auto : هنگامی که به طور مستقل استفاده می شود، تصویر پس زمینه بر اساس عرض و ارتفاع ذاتی آن اندازه می شود. هنگامی که auto در کنار یک مقدار CSS دیگر برای عرض (پارامتر اول) یا ارتفاع (پارامتر دوم) استفاده می‌شود، ابعاد تنظیم شده روی auto به اندازه‌ای که لازم است برای حفظ نسبت تصویر طبیعی اندازه‌گیری می‌شود. این رفتار پیش فرض ویژگی background-size است.
• cover : کل سطح لایه پس زمینه را پوشش می دهد. این ممکن است به این معنی باشد که تصویر کشیده یا بریده شده است.
• contain : تصویر را به گونه ای اندازه می دهد که فضا را بدون کشش یا برش پر کند. در نتیجه، فضای خالی می‌تواند باقی بماند که باعث تکرار تصویر می‌شود، مگر اینکه background-repeat no-repeat تنظیم شده باشد.

دومی 2 در نظر گرفته شده است که به صورت مستقل و بدون پارامتر دیگری استفاده شود.

دمو زیر این کلمات کلیدی را در عمل نشان می دهد:

نسخه ی نمایشی استفاده از این کلمات کلیدی در background-size :

پیوست پس زمینه

ویژگی background-attachment به شما امکان می‌دهد تا رفتار موقعیت ثابت تصاویر پس‌زمینه (تصاویر بخشی از لایه پس‌زمینه) را هنگامی که لایه روی صفحه قابل مشاهده است، تغییر دهید.

این 3 کلمه کلیدی را می پذیرد: scroll ، fixed و local .

رفتار پیش‌فرض ویژگی background-attachment مقدار اولیه scroll است. هنگامی که به فضای بیشتری نیاز است، تصاویر با آن فضای درون لایه پس‌زمینه که توسط محدوده‌های جعبه CSS تعیین می‌شود، حرکت می‌کنند.

استفاده از مقدار fixed موقعیت تصاویر پس‌زمینه را در درگاه دید ثابت می‌کند.

هنگامی که فضای اولیه تصاویر لایه پس‌زمینه اشغال می‌شود، باید در خارج از صفحه اسکرول (یا رندر) شوند، تصاویر درون لایه پس‌زمینه در موقعیت اصلی ثابت می‌مانند، لایه پس‌زمینه آن‌ها را فعال می‌کند تا زمانی که کل لایه از صفحه نمایش خارج شود. .

کلیدواژه local موقعیت تصاویر پس زمینه را نسبت به محتویات عنصر ثابت می کند. تصاویر پس‌زمینه اکنون در امتداد فضایی که اشغال می‌کنند حرکت می‌کنند، زیرا این فضا در داخل و خارج از محدوده جعبه CSS (معمولاً به دلیل تبدیل‌های پیمایشی، دو بعدی یا سه بعدی) ارائه می‌شود.

منشاء پس زمینه

ویژگی background-origin شما را قادر می سازد تا ناحیه پس زمینه های مرتبط با یک کادر خاص را تغییر دهید. مقادیری که ویژگی می پذیرد با مناطق border-box ، padding-box و content-box یک جعبه مطابقت دارد.

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

کلیپ پس زمینه

ویژگی background-clip آنچه را که به صورت بصری از یک لایه پس‌زمینه دیده می‌شود، بدون توجه به مرزهای ایجاد شده توسط ویژگی background-origin کنترل می‌کند.

مانند background-origin مناطقی که می‌توان مشخص کرد عبارتند از border-box ، padding-box ، و content-box مربوط به جایی که یک لایه پس‌زمینه CSS می‌تواند ارائه شود. هنگامی که از این کلمات کلیدی استفاده می شود، هر رندر پس زمینه فراتر از منطقه مشخص شده برش یا بریده می شود.

ویژگی background-clip همچنین یک کلمه کلیدی text را می‌پذیرد که پس‌زمینه را بیشتر از متن درون کادر محتوا برش می‌دهد. برای اینکه این اثر در متن واقعی یک جعبه CSS مشهود باشد، متن باید تا حدی یا کاملاً شفاف باشد.

یک ویژگی نسبتاً جدید، در زمان نوشتن این مقاله، کروم و اکثر مرورگرها برای استفاده از این ویژگی به پیشوند -webkit- نیاز دارند.

پس زمینه های متعدد

همانطور که در ابتدای ماژول ذکر شد، لایه پس زمینه اجازه می دهد تا چندین زیرلایه تعریف شود. برای اختصار، به این زیرلایه ها به عنوان پس زمینه اشاره می کنم.

پس زمینه های متعدد از بالا به پایین تعریف شده است. اولین پس‌زمینه نزدیک‌ترین پس‌زمینه به کاربر است، در حالی که پس‌زمینه آخر دورترین پس‌زمینه از کاربر است.

تنها پس زمینه تعریف شده یا آخرین لایه، لایه پس زمینه نهایی توسط مرورگر تعیین می شود. فقط این لایه مجاز به اختصاص background-color است.

همانطور که در قطعه کد و نمایش زنده زیر نشان داده شده است، می توان چندین لایه را به صورت جداگانه با استفاده از اکثر ویژگی های CSS مرتبط با پس زمینه که با کاما از هم جدا شده اند، پیکربندی کرد.

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

خلاصه پس زمینه

برای آسان‌تر کردن استایل دادن به لایه پس‌زمینه یک جعبه - به‌ویژه زمانی که چندین لایه پس‌زمینه مورد نظر است - یک کوتاه‌نویسی وجود دارد که از الگوی خاص زیر پیروی می‌کند:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

ترتیب در شکل مختصر اعلام پیشینه های متعدد مهم است. مقادیر موقعیت و اندازه باید هر دو ارائه شوند و با علامت ( / ) از هم جدا شوند. اعلام اصل و رفتار کلیپ به ترتیب صحیح به شما امکان می دهد از تنظیم کلمات کلیدی که برای هر دو معتبر هستند به طور همزمان استفاده کنید.

اعلان زیر پس‌زمینه را کلیپ می‌کند و آن را از کادر محتوا ایجاد می‌کند:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

با در نظر گرفتن این معنای کوتاه نویسی، اعلان های قبلی مربوط به پس زمینه قطعه کد را می توان به شکل زیر بازنویسی کرد:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

درک خود را بررسی کنید

دانش خود را از پس زمینه های CSS تست کنید