آموزش css – درس نوزدهم – تعیین میزان شفافیت (Opacity)

طراحی سایت » آموزش CSS » آموزش css – درس نوزدهم – تعیین میزان شفافیت (Opacity)
۳ اسفند ۱۳۹۷ چاپ
شفافیت و opacity در css

نقشه راه یادگیری دوره آموزشی CSS

یکی دیگر از امکاناتی که css در اختیار طراحان سایت قرار میدهد، کنترل بر میزان شفافیت تصاویر و عناصر موجود در صفحه است. البته این خصوصیت مربوط به css3 است ولی بهتر دیدیم در همین سری آموزشی آن را توضیح دهیم.

تا قبل از اینکه این خصوصیت به css اضافه شود، برای اینکه بتوانیم بخشی از صفحه وب را به صورت شفاف (طوری که عناصر زیر آن مشخص باشند) نمایش دهیم، مجبور بودیم از تصاویر gif یا png که قابلیت شفاف سازی دارند استفاده کنیم که همین امر سبب میشد تا حجم صفحات طراحی شده به طور چشم گیری افزایش پیدا کند.

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

میزان شفافیت (Opacity)

فرض کنید میخواهید یک تصویر را در صفحه به صورت شفاف نمایش دهید، برای اینکار باید از کد css زیر استفاده کنید:

img{
Opacity:0.5;
Filter: alpha(opacity=50);
}

در مثال بالا، برای انتخابگر img دو حالت تعیین کردیم. در سطر نخست میزان opacity یا شفافیت را برابر نیم (۰٫۵) قرار دادیم. مقداری که میتوانیم به این مشخصه اختصاص دهیم یک عدد بین ۰ تا ۱ است به این معنی که ۰ برابر با کاملا شفاف و ۱ برابر با کاملا کدر (اصل تصویر) میباشد.

این مشخصه توسط مرورگرهای اینترنت اکسپلورر ۹، فایرفاکس، کروم، سافاری و اوپرا شناسایی میشود ولی برای اینترنت اکسپلورر ۸ و قبل از آن معنی ندارد و باید به طور جداگانه تنظیمات آنرا اعمال کنیم برای همین در سطر دوم از قابلیت filter استفاده کردیم.

هنگامی که برای تعیین میزان شفافیت تصویر یا هر عنصری از filter: alpha استفاده میکنیم، مقداری که میتوانیم اختصاص دهیم یک عدد از ۰ تا ۱۰۰ میباشد. پس ۵۰ در سطر دوم دقیقا معادل نیم در سطر نخست است.
در زیر نحوه ی کار با این مشخصه را در عمل مشاهده خواهید کرد.

مثال آنلاین شماره یک

در درس گذشته در مورد کلاسها و عناصر کاذب صحبت کرده بودیم. برای اینکه بتوانید به طور مؤثرتری از مشخصه ی opacity استفاده کنید، میتوانید آنرا با کلاسهای کاذب همراه کنید. به مثال زیر توجه کنید:

Img{
Opacity:0.5;
Filter: alpha(opacity=50);
}
Img:hover{
Opacity:1.0;
Filter: alpha(opacity=100);
}

بخش نخست مثال بالا، دقیقا مانند مثال قبلی است که مطرح کردیم، پس انتظار داریم تمام تصاویر موجود در صفحه ۵۰% شفافتر از معمول باشند. ولی با استفاده از کلاس کاذب :hover تعیین کردیم که اگر مکان نمای ماوس بر روی تصاویر قرار گیرد، میزان شفافیت یا opacity آنها برابر ۱ ( یا ۱۰۰ ) شود. این خاصیت به خصوص در ساخت گالری تصاویر بسیار کاربردی است.

مثال آنلاین شماره دو

ساخت جعبه های شفاف

شفاف سازی تنها مختص تصاویر نیست. شما میتوانید از این خصوصیت برای شفاف کردن سایر بخشها و جعبه ها (div) نیز استفاده کنید. یا اینکه تصویر زمینه ای برای یک متن تعیین کنید و با شفاف سازی تصویر، جلوه ی زیبایی به متن بدهید. در نمونه آنلاین زیر (شماره ۳) نحوه انجام اینکار با جزئیات توضیح داده شده است.

مثال آنلاین شماره سه

گفتگو پیرامون آموزش css – درس نوزدهم – تعیین میزان شفافیت (Opacity)

(منتشر شده: 2 | در انتظار تایید: 0)
mehrdad

ممنون از سایت خوبتون
فقط یک سوال دارم
اگه بخوام یک div را شفاف کنم که عکس پشتش پیدا باشه ولی نوشته های درون div شفاف نباشند چکار باید کنم؟؟؟؟
ممنون میشم جواب بدین

پاسخ دهید
عصرعلم

در پاسخ به mehrdad

سلام
برای div یک کلاس در نظر میگیریم (مثلا example) و بعد خود div.example را شفاف میکنیم ولی میزان شفافیت div.example p و div.example a (پاراگراف و لینک و …) را غیر شفاف قرار میدیم.

پاسخ دهید

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین