CSS پس‌زمینه چندگانه

در این فصل، شما یاد خواهید گرفت که چگونه چندین تصویر پس‌زمینه به یک عنصر اضافه کنید.

شما همچنین با ویژگی‌های زیر آشنا خواهید شد:

  • background-size
  • background-origin
  • background-clip

CSS پس‌زمینه چندگانه

CSS به شما اجازه می‌دهد که از طریق background-image ویژگی برای اضافه کردن چندین تصویر پس‌زمینه به یک عنصر استفاده می‌شود.

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

در مثال زیر دو تصویر پس‌زمینه وجود دارد، اولین تصویر گل (با هماهنگی پایین و سمت راست) و دومین تصویر پس‌زمینه کاغذ (با هماهنگی بالا و سمت چپ):

مثال

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

تست کنید

تصاویر پس‌زمینه چندگانه می‌توانند با استفاده از ویژگی جداگانه پس‌زمینه (مانند آنچه در بالا ذکر شد) یا background کوتاه‌نویسی‌های ویژگی‌ها برای مشخص کردن استفاده شده است.

در مثال زیر از background کوتاه‌نویسی‌های ویژگی‌ها (نتیجه‌ای مشابه با مثال بالا):

مثال

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

تست کنید

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

CSS background-size این属性 به شما اجازه می‌دهد اندازه‌ی تصویر پس‌زمینه را مشخص کنید.

اندازه‌ی تصویر پس‌زمینه را می‌توان با استفاده از طول، درصد یا یکی از دو کلمه کلیدی زیر مشخص کرد:;contain یا cover.

این مثال اندازه‌ی تصویر پس‌زمینه را به اندازه‌ای کوچکتر از تصویر اصلی تنظیم می‌کند (با استفاده از پیکسل):;

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

این کد است:;

مثال

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

تست کنید

background-size دو مقدار دیگر ممکن است برای این باشد contain و cover.

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

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

در نمونه‌های زیر نمایش داده شده است contain و cover روش استفاده از آن:;

مثال

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

تست کنید

تعریف اندازه‌ی چندین تصویر پس‌زمینه

در هنگام کار با پس‌زمینه‌های چندگانه،;background-size این属性 می‌تواند چندین مقدار برای تنظیم اندازه‌ی پس‌زمینه را پذیرا باشد (لیست جدا شده با کاما).;

این مثال سه تصویر پس‌زمینه را مشخص می‌کند، هر کدام دارای اندازه‌ی background-size متفاوتی است:;

مثال

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat,; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

تست کنید

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

حالا، ما می‌خواهیم تصویر پس‌زمینه وب‌سایت همیشه تمام پنجره مرورگر را پوشش دهد.

توضیحات دقیق به شرح زیر است:

  • صفحه را با تصویر پرکنید (بدون فضای خالی)
  • تصویر را به اندازه نیاز بزرگ‌کنید
  • تصویر را در صفحه居中兴ار دهید
  • بدون ایجاد نوار اسکرول

در نمونه‌های زیر نحوه انجام آن را نشان می‌دهیم: از عنصر <html> استفاده کنید (<html> همیشه حداقل به اندازه高度的 پنجره مرورگر است). سپس پس‌زمینه ثابت و مرکزی را روی آن تنظیم کنید. در نهایت از ویژگی background-size اندازه آن را تنظیم کنید:

مثال

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

تست کنید

Hero Image

شما همچنین می‌توانید ویژگی‌های پس‌زمینه مختلف را در <div> استفاده کنید تا Hero Image (تصویر بزرگ با متن) ایجاد کنید و آن را در مکانی که می‌خواهید قرار دهید.

مثال

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

تست کنید

ویژگی background-origin CSS

CSS background-origin ویژگی مشخص‌کننده موقعیت تصویر پس‌زمینه است.

این ویژگی سه مقدار مختلف را می‌پذیرد:

  • border-box - تصویر پس‌زمینه از گوشه چپ بالا فریم شروع می‌شود
  • padding-box - تصویر پس‌زمینه از گوشه چپ بالا لبه‌های پادینگ شروع می‌شود (پیش‌فرض)
  • content-box - تصویر پس‌زمینه از گوشه چپ بالا شروع می‌شود

در نمونه‌های زیر نمایش داده شده است background-origin ویژگی‌ها:

مثال

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

تست کنید

ویژگی background-clip CSS

CSS background-clip ویژگی مشخص‌کننده منطقه‌ای است که پس‌زمینه در آن کشیده می‌شود.

این ویژگی سه مقدار مختلف را می‌پذیرد:

  • border-box - پس‌زمینه تا لبه‌های بیرونی فریم کشیده می‌شود (پیش‌فرض)
  • padding-box - پس‌زمینه تا لبه‌های بیرونی پادینگ کشیده می‌شود
  • content-box - پس‌زمینه در جعبه محتوا کشیده می‌شود

در نمونه‌های زیر نمایش داده شده است background-clip ویژگی‌ها:

مثال

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

تست کنید

ویژگی‌های پیشرفته پس‌زمینه CSS

ویژگی توضیح
background ویژگی کوتاه‌نویسی برای تنظیم تمام ویژگی‌های پس‌زمینه در یک دستور.
background-clip منطقه‌ای که پس‌زمینه‌ها در آن ترسیم می‌شوند را تعیین می‌کند.
background-image یک یا چند تصویر پس‌زمینه برای یک عنصر تعیین می‌کند.
background-origin موقعیت قرارگیری تصویر پس‌زمینه را تعیین می‌کند.
background-size مقدار شبکه‌ای پس‌زمینه را تعیین می‌کند.