توابع opacity() در CSS

تعریف و استفاده

CSS opacity() توابع فیلتر برای اعمال اثر شفافیت بر عناصر استفاده می‌شوند.

• 100% (یا 1) باعث هیچ اثری نمی‌شود
• 50% (یا 0.5) باعث شفافیت 50% عنصر می‌شود
• 0% (یا 0) باعث شفافیت کامل عنصر می‌شود

مثال

مثال 1

تنظیم شفافیت مختلف برای تصاویر:

#img1 {
  filter: opacity(80%);
}
#img2 {
  filter: opacity(50%);
}
#img3 {
  filter: opacity(0.2);
}

آزمایش کنید

مثال 2

به opacity() با backdrop-filter استفاده همزمان ویژگی‌ها:

div.transbox {
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: opacity(50%);
  backdrop-filter: opacity(50%);
  padding: 20px;
  margin: 30px;
  font-weight: bold;
}

آزمایش کنید

نحوه نوشتن CSS

opacity(مقدار)

جزئیات فنی

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگر پشتیبان از این توابع است.

صفحات مرتبط

منابع:ویژگی filter CSS

منابع:توابع blur() در CSS

منابع:توابع brightness() در CSS

منابع:توابع contrast() در CSS

منابع:توابع drop-shadow() در CSS

منابع:توابع grayscale() در CSS

منابع:توابع hue-rotate() در CSS

منابع:توابع invert() در CSS

منابع:توابع saturate() CSS

منابع:توابع sepia() CSS