شفافیت، فیلتر و object-fit

شفافیت

opacity: 0.5;                 /* کل عنصر نیمه‌شفاف */
background: rgba(0,0,0,0.5);  /* فقط پس‌زمینه شفاف */

filter

افکت‌های گرافیکی روی عنصر/تصویر:

filter: blur(4px);
filter: grayscale(100%);
filter: brightness(1.2) contrast(1.1);
filter: saturate(1.5);

ترکیب‌شدنی‌اند: filter: blur(2px) brightness(0.8);

backdrop-filter (شیشه‌ای)

backdrop-filter: blur(8px);   /* محو پشتِ عنصر */

افکت «شیشهٔ مات» مدرن.

object-fit (برای تصویر)

وقتی ابعاد تصویر با کادر نمی‌خواند:

img {
    width: 200px; height: 200px;
    object-fit: cover;    /* پر می‌کند بدون کِش‌آمدن */
}

cover (پوشش)، contain (کامل داخل)، fill (کشیده).