CSS Opacity
خاصیت opacity در CSS چیست؟
خاصیت `opacity` میزان شفافیت یک عنصر را تنظیم میکند. این خاصیت بر روی کل عنصر و محتویات آن (مثل متن، تصاویر و عناصر فرزند) تاثیر میگذارد.
* محدوده مقدار: از `0` (کاملاً شفاف) تا `1` (کاملاً مات و دیدهشدنی).
* مثال: `opacity: 0.5;` یعنی عنصر ۵۰٪ شفاف (نیمه شفاف) است.
—
نحوه استفاده:
“`css
selector {
opacity: 0.7; /* ۷۰٪ مات، ۳۰٪ شفاف */
}
“`
—
مثال:
“`html
<div style=“opacity: 0.3; background-color: blue; color: white; padding: 20px;”>
این div به میزان ۳۰٪ مات است.
</div>
“`
—
### نکات مهم:
* `opacity` روی کل عنصر شامل متن و فرزندان آن تاثیر دارد.
* اگر میخواهید فقط پسزمینه شفاف باشد ولی متن کاملاً واضح باقی بماند، بهتر است از رنگهای `rgba()` برای پسزمینه استفاده کنید به جای `opacity`.
مثال:
“`css
background-color: rgba(0, 0, 255, 0.3); /* پسزمینه آبی نیمه شفاف */
“`
دیدگاهتان را بنویسید