**opacity:** يتحكم في شفافية العنصر بأكمله (0 = شفاف، 1 = معتم). يؤثر على كل محتوى العنصر بمن فيهم الأبناء. استخدم rgba/hsla بدلاً منه للخلفية فقط.
**mix-blend-mode:** يتحكم في كيفية دمج العنصر مع ما خلفه. أنماط مثيرة: - `multiply` — تعتيم، يُبقي الألوان الداكنة - `screen` — إضاءة، يُبقي الألوان الفاتحة - `overlay` — يدمج ويُعزز التباين - `difference` — يطرح الألوان (تأثير ملوّن) - `luminosity` — يأخذ السطوع فقط - `color` — يأخذ اللون فقط
**background-blend-mode:** مثل mix-blend-mode لكن يدمج طبقات الخلفية مع بعضها (لا مع ما خلف العنصر).
| 1 | /* شفافية للعنصر كاملاً */ |
| 2 | .modal-overlay { background: rgba(0,0,0,0.5); } /* أفضل من opacity */ |
| 3 | .disabled { opacity: 0.4; } |
| 4 | |
| 5 | /* دمج نص مع خلفية */ |
| 6 | .blend-text { |
| 7 | mix-blend-mode: multiply; |
| 8 | color: #1e3a8a; |
| 9 | } |
| 10 | |
| 11 | /* دمج طبقات الخلفية */ |
| 12 | .hero { |
| 13 | background-image: url('texture.png'), linear-gradient(#3b82f6, #7c3aed); |
| 14 | background-blend-mode: overlay; |
| 15 | } |
مثال 1: تأثير Duotone بـ background-blend-mode
| 1 | .duotone { |
| 2 | background-image: url('/images/photo.jpg'); |
| 3 | background-color: hsl(220 80% 50%); |
| 4 | background-blend-mode: luminosity; |
| 5 | filter: saturate(2) hue-rotate(20deg); |
| 6 | } |