آموزش زمینه های چندگانه CSS

13 جولای 2021


زمینه های چندگانه CSS

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

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

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

مثال

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

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

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

مثال

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

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

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

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

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

این کد است:

مثال

#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ویژگی همچنین مقادیر مختلفی را برای اندازه پس زمینه (با استفاده از یک لیست جدا شده با کاما) ، هنگام کار با چندین پس زمینه ، می پذیرد.

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

مثال

#example1 {
  background: url(img_tree.gif) left top no-repeat, url(img_flwr.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;
}

تصویر قهرمان

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

مثال

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

ویژگی CSS پس زمینه

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

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

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

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

مثال

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

خاصیت کلیپ پس زمینه CSS

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

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

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

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

مثال

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

منبع

مقاله‌های مشابه

7 مرحله فروش بیمه عمر (2)

7 مرحله فروش بیمه عمر (2)

18/9/96 چه بلایی سر آدم میاره خیلی جالبه انقدر سنگ، توام داری درست راه میری اینجوری لنگ میزنی، وقتی یه ذره زمانش طولانی تر بشه دیگه لنگ نمیزنی مجبوری اینجوری کنی من دیگه نمیتونم بیام یه ذره میشینی پامیشی، فروش اینو خیلیها حذف میکنن، برای خیلیها تو ذهنشون همون سنگه...

بیشتر بخوانید
7 مرحله فروش بیمه عمر (1)

7 مرحله فروش بیمه عمر (1)

11/9/96 امروز میخوایم 7 مرحله فروش بیمه عمر یا هر محصولی که شما در کل کره زمین میشناسید، وقتی میگم محصول یه روز این محصولی که داریم ازش صحبت میکنیم میتونه هر چیزی به چیزی بجز بیمه عمر باشه، یکی از مهمترین مباحثی که در دوره تکنسین یاد میگیرید و عملاً آچارفرانسه تمام...

بیشتر بخوانید

شما هم به جمع ۱۰۰,۰۰۰ مشترک خبرنامه‌ ما بپیونید

0 دیدگاه

یک دیدگاه بنویسید

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