صفت object-position در css
صفت object-position در css تراز عناصر خارج محدوده
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت object-position در زبان css توضیحاتی را ارائه نماییم.
ویژگی کاربردی object-position در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی جدید object-position در زبان طراحی سی اس اس
به کمک خاصیت object-position می توانیم محتوای عناصر با منبعی خارج از محدوده css یا ( Replacement Elements ) را ترازبندی کنیم.
عناصر Replacement Elements
Replacement Elements به عناصری گفته می شود که محتوا و ابعاد آنها از منبعی خارج از محدوده سی اس اس تعیین می شوند.
مثل تگ video ، تگ img و یا تگ هایی مثل textarea و input ها.
در حقیقت در حالت پیش فرض این عناصر یا تگ ها ، محتوای مربوط به خود را در مرکزشان ترسیم می کنند. شما می توانید از طریق خصوصیت object-position این حالت پیش فرض را تغییر دهید.
مقادیر صفت جدید object-position در زبان طراحی سی اس اس
صفت object-position که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:
- مقدار position
- مقدار initial
- مقدار 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 از نظر نسخه زبان طراحی سی اس اس
ویژگی کاربردی object-position در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
بررسی ساختاری خصوصیت object-position در زبان طراحی سی اس اس
عناوین ساختاری خاصیت object-position | وضعیت ساختاری خاصیت object-position |
مقدار پیش فرض | 50% 50% |
قابلیت توارث | دارد |
قابلیت تحرک | دارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.objectPosition="0 10% |
پشتیبانی مرورگرهای اینترنتی از خاصیت object-position در زبان طراحی سی اس اس
| خاصیت css |  |  |  |  |  |
| object-position | 31.0 | 16.0 | 36.0 | 10.0 | 19.0 |
Table of Contents
دیدگاهتان را بنویسید