پس زمینه‌های گوناگون

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
CSS پیشرفته
۱گوشه‌های گرد
۲کادر تصاویر
۳پس‌زمینه‌ها
۴رنگ‌ها
۵Gradientها
۶سایه‌ها
۷افکت‌های متن
۸قلم‌های وب
۹2D Transforms
۱۰3D Transforms
۱۱Transitions
۱۲انیمیشن‌ها
۱۳Tooltip
۱۴استایل‌دهی تصاویر
۱۵ویژگی object-fit
۱۶دکمه‌ها
۱۷مثال‌های صفحه‌بندی (Pagination)
۱۸ستون‌های متعدد
۱۹رابط کاربری
۲۰متغیرها
۲۱Box Sizing
۲۲Flexbox
۲۳Media Queries
۲۴مثال‌های Media Queries
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

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

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

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

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

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

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

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

مثال
1 #example1 {
2   background-image: url(img_flwr.gif), url(paper.gif);
3   background-position: right bottom, left top;
4   background-repeat: no-repeat, repeat;
5 }


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

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

مثال
1 #example1 {
2   background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
3 }


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

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

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

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

در این‌جا کد مربوطه وجود دارد:

مثال
1 #div1 {
2   background: url(img_flower.jpg);
3   background-size: 100px 80px;
4   background-repeat: no-repeat;
5 }


دو مقدار معتبر برای ویژگی background-size مقادیر contain و cover می‌باشد.

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

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

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

مثال
 1 #div1 {
 2   background: url(img_flower.jpg);
 3   background-size: contain;
 4   background-repeat: no-repeat;
 5 }
 6 #div2 {
 7   background: url(img_flower.jpg);
 8   background-size: cover;
 9   background-repeat: no-repeat;
10 }


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

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

مثال زیر سه تصویر پس زمینه دارد، با اندازه‌های پس زمینه مختلف برای هر تصویر:

مثال
1 #example1 {
2   background: url(img_tree.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
3   background-size: 50px, 130px, auto;
4 }


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

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

موارد مورد نیاز عبارتند از:

  • صفحه جاری با تصویر (بدون فضای خالی) پر کنید
  • تصویر تا حد نیاز مقیاس کنید
  • تصویر را در صفحه وسط چین کنید
  • از ایجاد نوار پیمایش خودداری کنید

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

مثال
1 html {
2   background: url(img_man.jpg) no-repeat center fixed;
3   background-size: cover;
4 }


تصویر Hero

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

مثال
1 .hero-image {
2   background: url(img_man.jpg) no-repeat center;
3   background-size: cover;
4   height: 500px;
5   position: relative;
6 }


ویژگی background-origin در CSS

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

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

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

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

مثال
1 #example1 {
2   border: 10px solid black;
3   padding: 35px;
4   background: url(img_flwr.gif);
5   background-repeat: no-repeat;
6   background-origin: content-box;
7 }


ویژگی background-clip در CSS

ویژگی background-clip ناحیه رسم پس زمینه را مشخص می‌کند.

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

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

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

مثال
1 #example1 {
2   border: 10px dotted black;
3   padding: 35px;
4   background: yellow;
5   background-clip: content-box;
6 }


خود را با تمرین‌ها امتحان کنید!

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

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


منابع آموزشی