ویژگی opacity در css
ویژگی opacity در css تعیین شفافیت تگ اچ تی ام ال
در این مقاله از سایت آموزی جهت استفاده شما همراهان گرامی قصد داریم در مورد خاصیت opacity در زبان css توضیحاتی را ارائه نماییم.
ویژگی کاربردی opacity در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
معرفی و کاربرد ویژگی جدید opacity در زبان طراحی سی اس اس
به کمک خاصیت opacity می توانیم درجه شفافیت یک تگ html را تعیین کنیم. ما می توانیم میزان شفافیت عنصر html را تا حد ناپدید شدن عنصر کنترل نماییم.
نکات مهم
1- هنگام استفاده از خاصیت opacity با اضافه کردن شفافیت به پس زمینه یک تگ html ، تمام عناصر فرزند آن تگ html نیز شفاف می شوند.
2- از طریق خصوصیت opacity می تواند متن را در عنصر html کاملا شفاف بخوانید. اگر نمیخواهید شفافیت را برای عناصر فرزند اعمال کنید، از مقدار رنگ RGBA استفاده کنید.
مقادیر صفت جدید opacity در زبان طراحی سی اس اس
صفت opacity که در زبان طراحی CSS3 معرفی شده است، 3 مقدار می پذیرد که عبارتند از:
- مقدار number
- مقدار initial
- مقدار inherit
ویژگی opacity در css تعیین شفافیت تگ اچ تی ام ال
مقدار number درون خاصیت opacity در زبان سی اس اس
اگر خاصیت opacity را برای یک عنصر html برابر با مقدار number تعریف کنیم، یعنی می خواهیم یک مقدار بین 0 تا 1 برای عنصر html مربوطه مشخص نماییم.
مقدار 1 در حقیقت مقدار اولیه عنصر html است که تگ html را در حالت عادی و بدون شفافیت نشان می دهد.
هر چه از مقدار 1 به سمت مقدار 0 حرکت کنیم، به میزان شفافیت تگ html مربوطه افزوده می شود، تا جایی که در مقدار 0 شفافیت در بالاترین حد خود است و عنصر html ناپدید می شود.
[html] img{ opacity: 0.2; }[/html]
به تصاویر زیر که با سه مقدار 1 ( بدون شفافیت ) ، مقدار 0.5 ( شفافیت میانه ) و مقدار 0.2 ( شفافیت زیاد ) تعریف شده اند، توجه بفرمایید:
مقدار initial درون خاصیت opacity در زبان سی اس اس
اگر خاصیت opacity را برابر با مقدار initial تعریف کنیم، در حقیقت مقدار پیش فرض این خصوصیت برای تگ html مورد نظر اعمال می شود.
مقدار inherit درون خاصیت opacity در زبان سی اس اس
اگر خاصیت opacity را برابر با مقدار inherit تعریف کنیم، در واقع تگ html مربوطه خصوصیت مورد نظر را از والد پدری خود به ارث می برد.
بررسی خاصیت opacity از نظر نسخه زبان طراحی سی اس اس
ویژگی کاربردی opacity در زبان css و در آخرین نسخه این زبان طراحی یعنی css3 معرفی شده است.
بررسی ساختاری خصوصیت opacity در زبان طراحی سی اس اس
عناوین ساختاری خاصیت opacity | وضعیت ساختاری خاصیت opacity |
مقدار پیش فرض | 1 |
قابلیت توارث | ندارد |
قابلیت تحرک | دارد |
ورژن css صفت | CSS3 |
سینتکس صفت در جاوا اسکریپت | "object.style.opacity="0.5 |
پشتیبانی مرورگرهای اینترنتی از خاصیت opacity در زبان طراحی سی اس اس
| خاصیت css |  |  |  |  |  |
| opacity | 4.0 | 9.0 | 2.0 | 3.1 | 9.0 |
دیدگاهتان را بنویسید