cssطراحی سایت

جلسه ۵۰: اندازه گیری پیش زمینه ها با استفاده از کلمات کلیدی در CSS

دو کلمه کلیدی برای اندازه گیری پس زمینه وجود دارد. "contain" و "cover". بیایید ببینیم که آنها چگونه کار می کنند. موارد زیر را بیان خواهیم کرد

  • این چیزی است که حتماً متوجه شده اید.
  • نتیجه

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

<html>

 <head>

   <title> Background Sizing via Keywords </title>

 </head>

 <body>

   <div class=”bg”></div>

 </body>

</html>

.bg {
    height: 100vh;
    background-image: url("https://static.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg"); 
}

در هر دو مورد ، نتایج را مشاهده کنید. چه چیزی را متوجه می شوید؟ برو جلو ، من منتظر می مانم

این چیزی است که حتماً متوجه شده اید

cover ضمن حفظ نسبت ابعاد تصویر ، کل فضای مورد نیاز را پوشش می دهد. بیشتر اوقات این کافی است. حاوی کل تصویر در فضای مورد نیاز است. اگر فضای بیشتری باقی بماند ، پس زمینه تکرار می شود. نکته مهم این است که ، با تغییر اندازه مرورگر ، تصویر پس زمینه نیز به صورت پویا به روز می شود. توجه: در هر دو کلمه کلیدی cover و contain ، نسبت ابعاد تصویر به صورت سالم حفظ می شود.

نتیجه

آیا در درک مفاهیم مورد بحث در این درس مشکل دارید؟ جلو بروید و در زمین بازی بالا امتحان کنید. با انجام کار بهتر یاد خواهید گرفت. در درس بعدی ، روش دیگری برای اندازه گیری پیش زمینه های شما خواهیم دید. اندازه گیری پس زمینه ها با استفاده از اندازه گیری طول برخلاف کلمات کلیدی ، ممکن است پس زمینه ها نیز با استفاده از اندازه گیری طول اندازه بگیرند. در اینجا نحوه کار آن آورده شده است. با استفاده از اندازه گیری طول ، یک اعلامیه خالی مانند این است:

    p {
        background-size: 150px 200px
    }

هنگامی که از اندازه گیری طول استفاده می شود ، تصویر پس زمینه با توجه به مقادیر طول مشخص شده مقیاس بندی می شود. مقدار اول اندازه در امتداد محور x را مشخص می کند ، و مقدار دوم در امتداد محور y یعنی چپ به راست و بالا به پایین. در اینجا یک مثال بصری آورده شده است:

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

/*
THIS IS WRONG:
*/
p {
   background-size: -150px -200px
}

استفاده از مقادیر درصد

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

p {
  background-size: 50% 50%
}

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

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

background-size: contain

خوب ، خودتان این کار را انجام دهید. در زمین بازی بالا ، بنویسید:

background-size: contain

این چه تاثیری دارد؟ همچنین ، پیش بروید و اعلامیه را به این شکل تغییر دهید:

background-size: cover

در هر دو مورد ، نتایج را مشاهده کنید. چه چیزی را متوجه می شوید؟ برو جلو ، من منتظر می مانم

این چیزی است که حتماً متوجه شده اید

cover ضمن حفظ نسبت ابعاد تصویر ، کل فضای مورد نیاز را پوشش می دهد. بیشتر اوقات این کافی است. حاوی کل تصویر در فضای مورد نیاز است. اگر فضای بیشتری باقی بماند ، پس زمینه تکرار می شود. نکته مهم این است که ، با تغییر اندازه مرورگر ، تصویر پس زمینه نیز به صورت پویا به روز می شود. توجه: در هر دو کلمه کلیدی cover و contain ، نسبت ابعاد تصویر به صورت سالم حفظ می شود.

نتیجه

آیا در درک مفاهیم مورد بحث در این درس مشکل دارید؟ جلو بروید و در زمین بازی بالا امتحان کنید. با انجام کار بهتر یاد خواهید گرفت. در درس بعدی ، روش دیگری برای اندازه گیری پیش زمینه های شما خواهیم دید. اندازه گیری پس زمینه ها با استفاده از اندازه گیری طول برخلاف کلمات کلیدی ، ممکن است پس زمینه ها نیز با استفاده از اندازه گیری طول اندازه بگیرند. در اینجا نحوه کار آن آورده شده است. با استفاده از اندازه گیری طول ، یک اعلامیه خالی مانند این است:

    p {
        background-size: 150px 200px
    }

هنگامی که از اندازه گیری طول استفاده می شود ، تصویر پس زمینه با توجه به مقادیر طول مشخص شده مقیاس بندی می شود. مقدار اول اندازه در امتداد محور x را مشخص می کند ، و مقدار دوم در امتداد محور y یعنی چپ به راست و بالا به پایین. در اینجا یک مثال بصری آورده شده است:

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

/*
THIS IS WRONG:
*/
p {
   background-size: -150px -200px
}

استفاده از مقادیر درصد

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

p {
  background-size: 50% 50%
}

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

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا