cssطراحی سایت

جلسه ۴۸: شروع کار با تصاویر پس زمینه در CSS

وب بدون تصاویر چگونه خواهد بود؟ انبوهی از محتوای خسته کننده. خودشه! در این درس ، من شما را با تصاویر پس زمینه در CSS آشنا می کنم. در این بخش نگاهی عمیق به تصاویر پس زمینه و مجموعه وسیعی از گزینه های CSS خواهیم انداخت. این یک بخش جالب است! اولین سوال در ذهن شما این است که ، چگونه می توانم یک تصویر را به عنوان پس زمینه یک عنصر تنظیم کنم؟ خیلی راحت برای برخی از مثالهای این درس ، من از این دو تصویر استفاده خواهم کرد. دو تصویر شبیه هم هستند ، اما در اندازه های مختلف. یکی کوچک ، دیگری کاملاً بزرگ. به آنچه گفته شد در علامت گذاری را در زیر توجه کنید:

<div class=”bg”>

</div>

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

.bg {
    background-image: url('')
}

و در اینجا توضیح وجود دارد

ویژگی تصویر پس زمینه

خاصیت background-image ویژگی مورد نیاز برای تنظیم تصویر پس زمینه است. مقدار آن برابر با url () است. جایی که url مسیر تصویر را نگه می دارد. خروجی زیر را ببینید:

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

<html>

 <head>

   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>

 </head>

 <body>

   <div class=”bg”>

    </div>

 </body>

</html>

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

.bg {
  height: 100vh;
  background-image: url("https://i.imgur.com/Mx3P487.png");
}

<html>

 <head>

   <script type=”text/javascript” src=”https://code.jquery.com/jquery-1.12.0.js”></script>

 </head>

 <body>

   <div class=”bg”>

    </div>

 </body>

</html>

آه خدای من! 😱 چه اتفاقی افتاده؟ نگاهی به کد بالا بیندازید. چیزی تغییر نکرده است. به جز url اکنون به تصویر کوچکتراشاره میکند. اکنون رفتار حیاتی تصاویر پس زمینه را مشاهده می کنید

رفتار پیش فرض زمینه ها

۱٫ به طور پیش فرض ، تصاویر پس زمینه زمانی تکرار می شوند که نتوانند فضای موجود را پر کنند. یعنی اگر تصویر پس زمینه اعمال شده کوچک باشد ، تصویر چندین بار تکرار می شود تا عرض و ارتفاع موجود کاملا پر شود. این توضیح می دهد که چرا تصاویر در مثال دوم کاشی کاری شده اند. ۲٫ وقتی زمینه ها تکرار می شوند ، از چپ به راست و از بالا به پایین تکرار می شوند. ۳٫ به طور پیش فرض ، اگر تصویر خیلی بزرگ باشد ، قطع می شود. CSS بسیار هوشمند است. بنابراین ، در درس بعدی خواهیم دید که چگونه می توان تصاویر پس زمینه کنترل کامل داشت. می بینمت!

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

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

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

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