آموزش های حرفه ای
مای دیزاین به عنوان یکی از تولید کنندگان محتوای آموزشی در زمینه طراحی وب و گرافیک به صورت تصویری، با کیفیت و اختصاصی در خدمت شما کاربران عزیز می باشد!
نرم افزار آندروید
طراحی و ساخت نرم افزار آندروید خدمت جدیدی است که در مای دیزاین ارائه میشود. داشتن نرم افزار برای گوشی های هوشمند امری جدید و هیجان انگیز می باشد!
طراحی وب و گرافیک
یکی از خدمات ما طراحی سایت های ایستا و پویا با جدید ترین متد های روز دنیاست. ساخت قالب هایی سبک و در عین حال زیبا، با استفاده از وردپرس، تخصص ماست!
خاصیت background-size در سی اس اس ۳

خاصیت background-size در سی اس اس 3
سلام. امروز با یکی از ویژگی ها امکانات نسخه سوم سی اس اس اومدم خدمتتون. با کمک این خاصیت میتونید اندازه تصویر زمینه عنصر مورد نظرتون رو تعیین کنید. با من همراه باشید.
این قابلیت در نسخه های قبلی سی اس اس موجود نبود ولی در این نسخه شما میتوانید اندازه تصویر مورد نظرتون رو با توجه به عناصر مورد استفاده در صفحه تنظیم کنید. حالت کلی این کد به صورت زیر است و این تابع چهار مقدار میگیرد:

background-size:value;

۱- length: در این حالت اندازه ارتفاع و عرض عکس پس زمینه بر اساس واحدی مثل px تعیین می شود. اگر برای مثال مقدار ۱۰px را بنویسید طول و عرض تصویر رو برابر با ۱۰px قرار میدهد. اما شما میتوانید با ترکیب دو عدد مقدار طول و عرض رو به صورت جدا وارد نمایید. برای مثال

background-size:10px 20px

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

background-size:110%

۳- cover: در این حالت، عکس پس زمینه به اندازه محتویات درون عنصر کوچک خواهد شد، تا ارتفاع و عرض آن اندازه عنصر شود.

background-size:cover

۴- contain: در این حالت، عکس پس زمینه به اندازه محتویات درون عنصر بزرگ خواهد شد، تا ارتفاع و عرض آن اندازه عنصر شود.

background-size:contain

برای درک بهتر کد ها رو خیلی ساده تست کنید!

4 پاسخ به “خاصیت background-size در سی اس اس ۳”

  1. حمیدرضا می‌گه:

    سلام ممنون از مطالب خوبتن. قبلا هم درخواست کرده بودم، دوباره هم درخواست میکنم که لطفا آموزش بدین چطوری میشه یه “آخرین مطالب ارسالی” مث سایت شما داشت .

  2. حمیدرضا می‌گه:

    مرسی آقا علی

پاسخ دهید

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

آخرین محصولات فروشگاه
برخی مطالب تصادفی مای دیزاین
طرح لایه باز دکمه خاموش روشن
مجموعه عظیم آیکون های کاربردی (سری چهارم)
طرح لایه باز فلت آیفون ۶
نمایش خلاصه متن مطلب در وردپرس
خرید قالب وردپرس مای دیزاین (نسخه ۱٫۵)
آیکون های تمبری شبکه های اجتماعی