ویژگی clip در css برش در تگ html با موقعیت absolute

در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد صفت clip در زبان css توضیحاتی را ارائه نماییم.

ویژگی جدید clip در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

ویژگی clip در css برش در تگ html با موقعیت absolute

معرفی ویژگی کاربردی clip در زبان طراحی سی اس اس

اگر یک تصویر که درون تگ img معمولا قرار میگیرد، از تگ html والدش بزرگتر باشد، چه اتفاقی می افتد؟

با خصوصیت clip می توانیم مشکل بزرگ بودن تصاویر یا محتوایی که در محدوده تگ html با موقعیت absolute قرار نمی گیرند را حل کرده و به شکل مستطیل آنها را برش دهیم.

به عبارت ساده تر توسط خاصیت clip می توانیم به شکل یک مستطیل یک تگ html را که به صورت absolute موقعیت دهی شده است، برش دهیم.

مقادیر صفت کاربردی clip در زبان طراحی سی اس اس

صفت کاربردی clip که در زبان طراحی CSS2 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:

  1. مقدار auto
  2. مقدار shape
  3. مقدار initial

مقدار auto درون خاصیت clip در زبان سی اس اس

اگر خاصیت clip را برابر با مقدار auto قرار دهیم، در حقیقت برش در تگ html با موقعیت absolute اعمال نمی شود

مقدار auto به عنوان مقدار پیش فرض خصوصیت clip می باشد.

مثال براساس مقدار auto برای خاصیت clip

مقدار shape درون خاصیت clip در زبان سی اس اس

اگر خاصیت clip را برابر با مقدار shape قرار دهیم، می توانیم یک تگ html را به شکل مستطیل برش دهیم.

مقادیر قابل قبول در مقدار shape عبارنتد از: ( rect ( top, right, bottom, left

مثال براساس مقدار shape برای خاصیت clip

مقدار initial درون خاصیت clip در زبان سی اس اس

اگر خاصیت clip را برابر با مقدار initial قرار دهیم، در حقیقت همان مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.

ویژگی clip در css برش در تگ html با موقعیت absolute

بررسی خاصیت clip از نظر نسخه زبان طراحی سی اس اس

خصوصیت clip در دومین نسخه زبان طراحی css یعنی CSS2 معرفی شده است.

بررسی ساختاری خصوصیت clip

پشتیبانی مرورگرهای اینترنتی از خاصیت clip در زبان طراحی سی اس اس