به کمک نیاز دارید؟

خدمات تخصصی

جستجو
این کادر جستجو را ببندید.
Opacity

تنظیم شفافیت عناصر Opacity

ویژگی Opacity در CSS ابزاری قدرتمند برای تنظیم شفافیت عناصر وب است. این ویژگی به طراحان وب این امکان را می‌دهد که میزان شفافیت هر عنصر را بین ۰.۰ (کاملاً شفاف) تا ۱.۰ (کاملاً غیرشفاف) تنظیم کنند. در ادامه، روش‌های مختلف استفاده از این ویژگی و نکات مهم آن بررسی می‌شود.

 

حتما بخوانید: مرجع واحدهای شمارش، نام و شماره رنگ ها

 

 با ویژگی Opacity می توانید شفافیت تصاویر را تغییر دهید.

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

در مثال بالا زمانیکه opacity=40  تنظیم شده است، تصویر کدر تر نمایش داده می شود و زمانیکه opacity=100 در نظر گرفته شده است تصویر به صورت کاملا شفاف نمایش داده می شود. این حالت زمانی اتفاق میفتد که img:hover  انجام گیرد. یعنی با زفتن ماوس روی تصویر عکس به صورت شفاف نمایش داده می شود.

 

نکات مهم در استفاده از Opacity

  • وراثت شفافیت:

هنگامی که Opacity برای یک عنصر (مانند div) تنظیم می‌شود، تمام عناصر فرزند نیز همان مقدار شفافیت را به ارث می‌برند. این ممکن است باعث کاهش خوانایی متن داخل عناصر شود.

  • استفاده از RGBA:

برای جلوگیری از وراثت شفافیت، می‌توان از رنگ‌های RGBA استفاده کرد که در آن مقدار آخر نمایانگر شفافیت رنگ است.

 

با دریافت « مشاوره برنامه‌نویسی، وب و سئو » از کارشناسان جوان حرفه‌ای و باتجربه ساکوراد؛ موفقیت کسب و کار، رونق فروش و افزایش درآمد خود را تضمین کنید!

 

و اما کلام آخر…

ویژگی Opacity در CSS ابزاری مفید برای ایجاد جلوه‌های بصری جذاب در وب‌سایت‌ها است. با توجه به نکات ذکر شده، طراحان می‌توانند به راحتی میزان شفافیت عناصر را تنظیم کرده و تجربه کاربری بهتری ارائه دهند

تصویر دکتر علی قوامی
دکتر علی قوامی
دانش‌آموخته دکترای تخصصی (PhD) کارآفرینی فناوری، بنیانگذار و مدیر گروه بین‌المللی کسب و کار ساکوراد با بیش از ۲۰ سال تجربه بعنوان کوچ، مدرس، مشاور و منتور در حوزه‌های مختلف راه‌اندازی و توسعه کسب‌وکار در ۱۵ کشور جهان هستم. در تلاشم تا تجربیات ذی‌قیمت خود را با شما دوستان عزیزم به اشتراک گذارم.
پیشنهاد بر اساس سلیقه شما

مسیریابی تحصیلی - شغلی (آنلاین)

تست شغلی به آزمون روانشناسی گفته می شود که فرد با توجه به پاسخگویی به سوالات در انتها بهترین شغلی که می تواند در آن موفق باشد را معرفی می کند.

سئوالات و نظرات ارزشمند خود را با ما مطرح کنید

دیدگاهتان را بنویسید

کلینیک مشاوره کسب و کار

ارائه‌ی خدمات کوچینگ، مشاوره و منتورینگ توسط برترین متخصصان جوان

هاست سنتر حرفه‌ای

طیف وسیعی از خدمات حرفه‌ای هاستینگ با تنوع و کیفیت کنترل شده

کانال یوتیوب

آموزش‌ها و نکات کلیدی ما را دنبال کنید

کانال تلگرام

اخبار و تخفیفات گروهی ما را دنبال کنید

صفحه اینستاگرام

آموزش‌ها و تخفیفات گروهی ما را دنبال کنید

راهنمای گام به گام تا دریافت مشاوره

گام اول

انتخاب حوزه تخصصی مدنظر

گام دوم

بررسی رزومه مشاوران مرتبط

گام سوم

انتخاب مشاور با تخصص مدنظر

گام چهارم

تکمیل فرم و ثبت درخواست

گام پنجم

پرداخت حق‌الزحمه مشاور

گام ششم

تماس با شما برای تعیین وقت

گام هفتم

برقراری ارتباط شما با مشاور