تفاوت background-clip و background-origin

با توجه به سوالات متعدد در مورد تفاوت این دو ویژگی لازم دیدیم تا ویدیویی برای شرح بهتر این موضوع فراهم کنیم.

پیشنیازها

  1. Box Model

بصورت کلی تفاوت این دو ویژگی به شرح زیر است:

کاربردها

background-origin تعیین می کند که شروع ترسیم پس زمینه از کدام ناحیه باشد (یعنی گوشه سمت راست بالای تصویر بر روی گوشه سمت راست بالای کدام ناحیه قرار بگیرد)، اما background-clip تعیین کننده این است که پس زمینه در کدام ناحیه ها نمایش داده شود.

مقدار اولیه‌ها


background-clip: border-box
background-origin: padding-box

موثر بر …

ویژگی background-clip مربوط به رنگ و تصویر پس زمینه می‌باشد اما background-origin فقط مربوط به تصویر پس زمینه می باشد و تاثیری بر روی رنگ آن ندارد. (از آنجایی که رنگ یک پس زمینه یکسان است و اینکه کدام قسمت آن شروع ترسیم باشد تفاوتی ندارد)

سوالت رو توی پنل بحث و گفتگو مطرح کن.

7 دیدگاه برای “تفاوت background-clip و background-origin

  1. سلام
    دستتون درد نکنه
    کلی ذوق کردم یاد گرفتمش :)
    ولی خیلی شبیه هم بودن هاا خصوصا مقداراش 😀
    ولی چه فرق ها که داشتند 🙄
    بعضی مطالب لازمه که ویدویو اموزش داشته باشه
    بازم ممنونم :)

    +++راستی یکم جواب کامنت هارو زودتر بدید
    22 م گذاشتم 😨 11 جوابم رو دادید 😟

  2. سلام استاد.خیلی رسا توضیح میدین.من که لذت بردم.استاد خواهشا یه کارگاه هم بذارین برا مطالب اولیه cssوhtml.ممنون

  3. سلام اقای سیدی
    یه سوال دارم

    و توی css
    }.wrapper
    width: 500px
    {margin: 50px auto
    این کد با بالا با کد پایینی که

    و توی css
    }div
    width: 500px
    {margin: 50px auto
    بعضی ها دیدم به صورت اولی نوشتن
    بعضی ها به صورت دومی اما تفاوتشون توی چی هست؟

    1. سلام. تفاوت در نوع انتخابگر هستش. که بستگی به کاری که دارید انجام میدید باید انتخابگر مناسب تر رو انتخاب کنید. فصل انتخابگرها رو مطالعه کنید.

      سوالات نامرتبط به مطالب رو اینجا مطرح کنید تا دوستاتون کمکتون کنند.

  4. سلام استاد آیا راهی وجود داره که تو یه رویداد پدر یه تگو انتخاب کرد برای مثال روی لینک هاور شد پدرش که تگ li هست انتخاب بشه

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