فنکشن 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(مقدار)

جزئیات فنی

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

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

صفحات مرتبط

مراجع:CSS فیلٹر پراپریٹی

مراجع:CSS blur() فنکشن

مراجع:CSS brightness() فنکشن

مراجع:CSS contrast() فنکشن

مراجع:CSS drop-shadow() فنکشن

مراجع:CSS grayscale() فنکشن

مراجع:CSS hue-rotate() فنکشن

مراجع:CSS invert() فنکشن

مراجع:CSS saturate() کا فنکشن

مراجع:CSS sepia() کا فنکشن