آموزش ویژگی background-size در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی background-size در CSS با من همراه باشید.

آموزش ویژگی background-size در CSS

Free-Learn

ویژگی background-size در CSS

همونطور که از نام این ویژگی ، background-size مشخصه با استفاده از آن میتوان اندازه یا سایز تصویر زمینه را مشخص و یا تعریف نمود.

مقادیری که توسط واحدهای اندازه گیری مثه ( px یا % و.. ) برای اندازه زمینه مشخص میشود، از ۲ بخش تشکیل می شود :

بخش اول برای تنظیم اندازه عرض و بخش دوم برای تنظیم اندازه ارتفاع، لذا اگر فقط یکی از بخش هارو مشخص نمایید، مرورگرها بصورت خودکار بخش دوم را auto قرار میدهند.

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی background-size را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : تنظیم اندازه با استفاده از واحد اندازه گیری پیکسل (PX)

امتحان کنید

مثال شماره ۲ : تنظیم اندازه با استفاده از واحد اندازه گیری درصد (%)

امتحان کنید

مثال شماره ۳ : استفاده از مقدار cover ( تمام کادر را میپوشاند )

امتحان کنید

مثال شماره ۴ : استفاده از مقدار contain ( سعی میکند تمام ابعاد تصویر را نمایش دهد )

امتحان کنید

Free-Learn

جدول مشخصات ویژگی background-size در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض auto
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی دارد | اطلاعات بیشتر
نسخه CSS3
نحوه استفاده در جاوااسکریپت object.style.backgroundSize=”60px 120px”;

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background-size در CSS پشتیبانی میکنند یا خیر.

» عددی که در کنار -webkit- و -moz- و -o- وجود دارد ، یعنی از آن نسخه به بالا باید از این پیشوندها استفاده نمایید. ( درباره پیشوندها بیشتر بخوانید )

نام ویژگی Chrome Firefox Opera Safari IE
background-size ۴٫۰
۱٫۰ -webkit-
۴٫۰
۳٫۶ -moz-
۱۰٫۵
۱۰٫۰ -o-
۴٫۱
۳٫۰ -webkit-
۹٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی background-size در CSS

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

مقدار توضیح
auto پیش فرض – تصویر در اندازه اصلی و واقعی خودش نمایش داده میشود.
length اندازه توسط واحدهای اندازه گیری مشخص میشود.
(مقدار اول عرض را مشخص میکند و مقدار دوم ارتفاع را)
اگر مقدار دوم مشخص نشود بصورت خودکار auto محاسبه میشود.
% اندازه بصورت درصدی مشخص میشود.
(مقدار اول عرض را مشخص میکند و مقدار دوم ارتفاع را)
اگر مقدار دوم مشخص نشود بصورت خودکار auto محاسبه میشود.
cover مجبور میشود تمام کادر را توسط تصویر بپوشاند
یجورایی میشه گفت تصویر تمام صفحه میشه.
contain سعی میکند تصویر را در ابعاد اصلی خودش نمایش دهد
به گونه ای که تمام تصویر در کادر مشخص باشد.
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

پیشنهاد میکنم حتما آموزش واحدهای اندازه گیری در CSS را مشاهده و مطالعه نمایید.

Free-Learn

دریافت PDF یا پرینت این مطلب