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;
}

亲自试一试

CSS background-origin کا حصہ

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;
}

亲自试一试

CSS background-clip کا حصہ

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 规定背景图像的大小。