ویژگی opacity در css تعیین شفافیت تگ اچ تی ام ال

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

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

ویژگی opacity در css تعیین شفافیت تگ اچ تی ام ال

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

به کمک خاصیت opacity می توانیم درجه شفافیت یک تگ html را تعیین کنیم. ما می توانیم میزان شفافیت عنصر html را تا حد ناپدید شدن عنصر کنترل نماییم.

نکات مهم

1- هنگام استفاده از خاصیت opacity با اضافه کردن شفافیت به پس زمینه یک تگ html ، تمام عناصر فرزند آن تگ html نیز شفاف می شوند.

2- از طریق خصوصیت opacity می تواند متن را در عنصر html کاملا شفاف بخوانید. اگر نمیخواهید شفافیت را برای عناصر فرزند اعمال کنید، از مقدار رنگ RGBA استفاده کنید.

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

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

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

ویژگی opacity در css تعیین شفافیت تگ اچ تی ام ال

مقدار number درون خاصیت opacity در زبان سی اس اس

اگر خاصیت opacity را برای یک عنصر html برابر با مقدار number تعریف کنیم، یعنی می خواهیم یک مقدار بین 0 تا 1 برای عنصر html مربوطه مشخص نماییم.

مقدار 1 در حقیقت مقدار اولیه عنصر html است که تگ html را در حالت عادی و بدون شفافیت نشان می دهد.

هر چه از مقدار 1 به سمت مقدار 0 حرکت کنیم، به میزان شفافیت تگ html مربوطه افزوده می شود، تا جایی که در مقدار 0 شفافیت در بالاترین حد خود است و عنصر html ناپدید می شود.

به تصاویر زیر که با سه مقدار 1 ( بدون شفافیت ) ، مقدار 0.5 ( شفافیت میانه ) و مقدار 0.2 ( شفافیت زیاد ) تعریف شده اند، توجه بفرمایید:

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

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

مقدار inherit درون خاصیت opacity در زبان سی اس اس

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

ویژگی opacity در css تعیین شفافیت تگ اچ تی ام ال

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

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

بررسی ساختاری خصوصیت opacity در زبان طراحی سی اس اس