ویژگی Opacity / Transparency
ویژگی opacity
میزان کدری / شفافی یک عنصر را مشخص میسازد.[۱]
تصویر شفاف
ویژگی opacity
میتواند مقداری از ۰٫۰ تا ۱٫۰ داشته باشد. مقدار کمتر، میزان شفافیت بیشتر:
کدری ۰٫۲
کدری ۰٫۵
کدری ۱
(مقدار پیشفرض)
حالت hover شفاف
ویژگی opacity
اغلب همراه با انتخابگر :hover
برای تغییر میزان کدری (به انگلیسی: opacity) هنگام رویداد mouse-over استفاده میشود:
توضیح مثال
اولین بلوک CSS مشابه کد مثال ۱ است. به علاوه، اینکه هنگام hover کاربر روی یکی از تصاویر چه اتفاقی رخ دهد را اضافه کردهایم. در این حالت میخواهیم تصویر هنگامی که کاربر hover میکند شفاف نباشد. کد CSS برای انجام این کار opacity:1;
است.
زمانی که نشانهگر موس از تصویر دور میشود، تصویر دوباره شفاف خواهد بود.
مثالی از حالت hover رزرو شده:
جعبه شفاف
هنگام استفاده از ویژگی opacity
برای اضافهکردن شفافیت به پس زمینه یک عنصر، تمامی عناصر فرزند آن میزان شفایت یکسانی را به ارث میبرند. این امر خوانایی متن درون یک عنصر تمام شفاف رابسیار دشوار میکند:
شفافیت با استفاده از RGBA
اگر نمیخواهید که همانند مثال بالا، میزان کدری روی عناصر فرزند نیز اعمال شود، از مقادیر رنگی RGBA استفاده کنید. مثال زیر میزان کدری را برای رنگ پس زمینه و نه متن، تنظیم میکند:
در فصل رنگها در CSS آموختید، که میتوانید از RGB به عنوان یک مقدار رنگ استفاده کنید. علاوه بر RGB، میتوانید یک مقدار RGB را با یک کانال (alpha (RGBA استفاده کنید - که میزان کدری را برای یک رنگ مشخص میکند.
مقدار رنگی RGBA به صورت رو به رو مشخص میشود: rgba(red, green, blue, alpha). پارامتر alpha عددی بین ۰٫۰ (تمام شفاف) و ۱٫۰ (تمام مات) میباشد.
نکته: مطالب بیشتری را در مورد مقادیر رنگ RGBA در فصل رنگها در CSS خواهید آموخت.
متن در جعبه شفاف
این متنی است که درون جعبه شفاف قرار گرفتهاست.
ابتدا، یک عنصر <div> با مقدار (class="background") با یک تصویر پس زمینه و کادر میسازیم.
سپس ما یک <div> دیگر (”class=”transbox) درون <div> اول میسازیم.
<”div class=”transbox> یک رنگ پس زمینه، و یک کادر (به انگلیسی: border) دارد - div شفاف است.
درون div شفاف، متنی را درون یک عنصر <p> اضافه میکنیم.
خود را با تمرینها امتحان کنید!
منابع آموزشی