صفت object-position در css تراز عناصر خارج محدوده

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

ویژگی کاربردی object-position در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

صفت object-position در css تراز عناصر خارج محدوده - سایت آموزی

معرفی و کاربرد ویژگی جدید object-position در زبان طراحی سی اس اس

به کمک خاصیت object-position می توانیم محتوای عناصر با منبعی خارج از محدوده css یا ( Replacement Elements ) را ترازبندی کنیم.

عناصر Replacement Elements

Replacement Elements به عناصری گفته می شود که محتوا و ابعاد آنها از منبعی خارج از محدوده سی اس اس تعیین می شوند.

مثل تگ video ، تگ img و یا تگ هایی مثل textarea و input ها.

در حقیقت در حالت پیش فرض این عناصر یا تگ ها ، محتوای مربوط به خود را در مرکزشان ترسیم می کنند. شما می توانید از طریق خصوصیت object-position این حالت پیش فرض را تغییر دهید.

مقادیر صفت جدید object-position در زبان طراحی سی اس اس

صفت object-position که در زبان طراحی CSS3 معرفی شده است، ۳ مقدار می پذیرد که عبارتند از:

  1. مقدار position
  2. مقدار initial
  3. مقدار inherit

صفت object-position در css تراز عناصر خارج محدوده

مقدار position درون خاصیت object-position در زبان سی اس اس

اگر خاصیت object-position را برای یک عنصر html برابر با مقدار position تعریف کنیم، یعنی می خواهیم موقعیت تصویر یا ویدیو را درون جعبه محتوای آن مشخص می کند.

مقدار اول محور x ها را کنترل می کند و مقدار دوم محور y ها را کنترل می کند.

می توان یک رشته ( چپ، مرکز یا راست ) یا یک عدد ( در واحد px یا ٪ ) برای این مقدار تعیین نمود.  همچنین در این خصوصیت ، استفاده از مقادیر منفی مجاز است.

[html] div{ object-position: top right 20px; }[/html]

مقدار initial درون خاصیت object-position در زبان سی اس اس

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

مقدار inherit درون خاصیت object-position در زبان سی اس اس

اگر خاصیت object-position را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.

صفت object-position در css تراز عناصر خارج محدوده - سایت آموزی

بررسی خاصیت object-position از نظر نسخه زبان طراحی سی اس اس

ویژگی کاربردی object-position در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.

بررسی ساختاری خصوصیت object-position در زبان طراحی سی اس اس