هناك ثلاث طرق لتغيير شفافية عنصر في CSS:
باستخدام خاصية العتامة ،
باستخدام وظيفة rgba () ،
باستخدام دالة hsla ().
1. خاصية العتامة
تتيح لك خاصية العتامة جعل أي عنصر من عناصر صفحة الويب شفافًا جزئيًا أو كليًا. تغير هذه الخاصية شفافية العناصر التي لها صورة خلفية (صورة) أو خلفية بلون أو تدرج. إذا كان العنصر الذي تم تطبيق خاصية العتامة عليه يحتوي على عناصر أخرى بداخله ، فسيغيرون أيضًا عتامة هذه العناصر.
تتراوح خاصية العتامة من 0 (شفاف تمامًا) إلى 1 (معتم) ، على سبيل المثال:
H1 (اللون: # CD6829 ؛) div (الخلفية: # CDD6DB ؛ العتامة: .3 ؛) 
أرز. 1. شفافية العناصر باستخدام العتامة
2. وظيفة rgba ()
يُنشئ نموذج ألوان RGBA صبغة لونية عن طريق المزج بالنسب المطلوبة أحمر أحمر), أخضر أخضر)و أزرق أزرق)الألوان و قناة ألفا (ألفا)مسؤول عن درجة شفافية اللون. على عكس خاصية العتامة ، بالنسبة للكتلة التي تحتوي على عناصر أخرى ، فإن وظيفة rgba () ستغير عتامة الكتلة فقط.
أرز. 2.نموذج ألوان RGB h1 (اللون: # CD6829 ؛) div (الخلفية: rgba (205 ، 214 ، 219 ، 0.3) ؛) 
أرز. 3. شفافية العناصر باستخدام وظيفة rgba () 3. دالة hsla ()
دالة Hsla () التي تعني معلماتها نغمة (تدرج اللون), التشبع, سطوع (خفة)و قناة ألفا (ألفا)، يسمح لك أيضًا بتعيين لون شبه شفاف.
يتم تحديد الصبغات اللونية كنسبة مئوية باستخدام القيمة المقابلة من عجلة الألوان. الدائرة نفسها مقسمة إلى قطاعات ، على حدودها ألوان أساسية:
0/360 ° - أحمر
60 درجة - أصفر
120 درجة - أخضر
180 درجة - أزرق
240 درجة - أزرق
270 درجة - أرجواني
300 درجة أرجواني.
للحصول على اللون الأسود ، تحتاج إلى ضبط قيم تدرج اللون والتشبع والسطوع على الصفر - hsla (0 ، 0٪ ، 0٪ ، 1). يتم الحصول على الأبيض عند 100٪ hsla نصوع (0 ، 0٪ ، 100٪ ، 1) ، ويتم الحصول على اللون الرمادي عند صفر تشبع hsla (0 ، 0٪ ، 50٪ ، 1).
تُستخدم خاصية العتامة لإنشاء تأثير شفافية في CSS.
يدعم IE8 والإصدارات الأقدم خاصية بديلة - عامل التصفية: alpha (opacity = x) ، حيث يمكن أن تأخذ "x" قيمة من 0 إلى 100 ، فكلما انخفضت القيمة ، كان العنصر أكثر شفافية.
تدعم جميع المتصفحات الأخرى خاصية عتامة CSS القياسية ، والتي يمكن أن تأخذ أرقام قيمة من 0.0 إلى 1.0 ، فكلما انخفضت القيمة ، كان العنصر أكثر شفافية:
محاولة "
تحوم الشفافية
تسمح لك الفئة الزائفة hover بتغيير مظهر العناصر عند التمرير فوقها. سنستخدم هذه الفرصة لجعل الصورة تفقد شفافيتها عند تحريك الماوس:
محاولة "
شفافية الخلفية
هناك طريقتان محتملتان لجعل عنصر ما شفافًا: خاصية العتامة الموضحة أعلاه ، وتحديد لون الخلفية بتنسيق RGBA.
قد تكون بالفعل على دراية بنموذج تمثيل ألوان RGB. RGB (أحمر ، أخضر ، أزرق - أحمر ، أخضر ، أزرق) هو نظام ألوان يحدد درجة اللون عن طريق مزج الألوان الأحمر والأخضر والأزرق. على سبيل المثال ، يمكنك استخدام أي من التعريفات التالية لتعيين لون النص إلى اللون الأصفر:
اللون: rgb (255،255،0) ؛ اللون: RGB (100٪ ، 100٪ ، 0) ؛
ستختلف الألوان المحددة مع RGB عن القيم السداسية التي استخدمناها من قبل لأنها تسمح باستخدام قناة الشفافية ألفا. هذا يعني أن خلفية عنصر بشفافية ألفا ستُظهر ما تحته.
إعلان لون RGBA مشابه في بناء الجملة لقواعد RGB القياسية. ومع ذلك ، من بين أشياء أخرى ، نحتاج إلى إعلان القيمة على أنها RGBA (بدلاً من RGB) وتعيين قيمة عشرية إضافية للشفافية بعد قيمة اللون في النطاق من 0.0 (شفاف تمامًا) إلى 1 (معتم تمامًا).
اللون: rgba (255،255،0،0.5) ؛ اللون: rgba (100٪ ، 100٪ ، 0.0.5) ؛
يتمثل الاختلاف بين خاصية العتامة و RGBA في أن خاصية العتامة تطبق الشفافية على العنصر بأكمله ، أي أن المحتوى الكامل للعنصر يصبح شفافًا. ويتيح لك RGBA ضبط شفافية الأجزاء الفردية للعنصر (على سبيل المثال ، النص أو الخلفية فقط):
الجسم (صورة الخلفية: url (img.jpg) ؛) .prim1 (العرض: 400 بكسل ؛ الهامش: 30 بكسل 50 بكسل ؛ لون الخلفية: #ffffff ؛ الحد: 1 بكسل أسود خالص ؛ وزن الخط: غامق ؛ التعتيم: 0.5 ؛ عامل التصفية : alpha (opacity = 70)؛ / * لـ IE8 والإصدارات السابقة * / text-align: center؛) .prim2 (العرض: 400 بكسل ؛ الهامش: 30 بكسل 50 بكسل ؛ لون الخلفية: rgba (255،255،255،0.5) ؛ الحدود: 1 بكسل صلبة أسود ؛ وزن الخط: غامق ؛ محاذاة النص: المركز ؛) جربه "
ملاحظة: قيم RGBA غير مدعومة في IE8 والإصدارات الأقدم. للإعلان عن لون احتياطي للمتصفحات القديمة التي لا تدعم قيم اللون مع قنوات ألفا ، حدده أولاً قبل قيمة RGBA: background: rgb (255،255،0)؛ الخلفية: rgba (255،255،0،0.5) ؛
فلاد مرزفيتش
يظهر تأثير الشفافية لعنصر ما بوضوح في صورة الخلفية وقد انتشر على نطاق واسع في أنظمة التشغيل المختلفة ، لأنه يبدو أنيقًا وجميلًا. في تصميم الويب ، يتم أيضًا تطبيق الشفافية وتحقيقها من خلال خاصية العتامة ، أو تنسيق ألوان RGBA الذي تم تعيينه للخلفية.
كتلة التدرج
اجعل الكتلة كما هو موضح في الشكل. 1. تحتوي الكتلة على إطار متدرج شبه شفاف مع خلفية متدرجة أسفل العنوان ومؤشر صغير. تظهر الخلفية على الصفحة فقط لتوضيح تأثير الشفافية ، يمكنك تحديد أي من الصور الخاصة بك. الحد الأدنى لارتفاع الكتلة هو 100 بكسل.
كيف اصنع طبقة شبه شفافة؟
لتغيير عتامة عنصر ما ، استخدم خاصية نمط العتامة بقيمة من 0 إلى 1 ، حيث يتوافق 0 مع الشفافية الكاملة ، و 1 ، على العكس ، مع عتامة الكائن. لا تعمل هذه الخاصية في Internet Explorer ، لذا يجب عليك استخدام عامل التصفية خصيصًا لها ، وهي خاصية ليست جزءًا من مواصفات CSS. يوضح المثال 1 كيفية تعيين شفافية الطبقة لجميع المستعرضات.
خلفية شفافة
فلاد مرزفيتش
الشفافية الجزئية ، عند استخدامها بشكل صحيح ، تبدو رائعة جدًا في تصميم مواقع الويب. الشيء الرئيسي هو أنه تحت الكتل الشفافة لا يوجد نمط أحادي اللون ، ولكن صورة ، في هذه الحالة تصبح الشفافية ملحوظة. يتم تحقيق هذا التأثير بطرق مختلفة ، وإذا كنت تتذكر كل شيء ، بما في ذلك الطرق القديمة ، فهذا يعني أنه يتم استخدام صورة PNG كخلفية ، وإنشاء صورة متقلب وخاصية العتامة. ولكن بمجرد أن يصبح من الضروري إنشاء خلفية شفافة في كتلة ، فإن هذه الأساليب لها جانب سلبي غير سار. سأقدم نظرة عامة موجزة حتى يصبح من الواضح ما هو على المحك ، وكذلك لأولئك القراء الذين ليسوا على دراية بالخيارات غير التقليدية لخلق تأثير الشفافية.
كيف يمكنني ضبط الجدول ليكون شبه شفاف ، لكن بعض الخلايا ليست كذلك؟
لتغيير شفافية عنصر في CSS3 ، يتم توفير خاصية العتامة ، ويمكن أن تتغير قيمته من 0 إلى 1. يتوافق الصفر مع الشفافية الكاملة للعنصر ، والآخر ، على العكس من ذلك ، للشفافية. تعمل المتصفحات الحديثة بشكل صحيح تمامًا مع هذه الخاصية ، باستثناء متصفح Internet Explorer ، لذلك عليك استخدام خاصية تصفية خاصة بقيمة ألفا (Opacity = X) ، حيث يمكن أن تختلف X من 0 إلى 100.
خاصية opacity CSS مسؤولة عن شفافية العناصر (الصور والنصوص والكتل) في html.
بنية عتامة CSS
العتامة: القيمة ؛
حيث يمكن أن تأخذ القيمة قيمًا حقيقية في النطاق من 0.0 إلى 1.0. تعني القيمة 1.0 عدم وجود شفافية (افتراضي).
أمثلة: كيف الشفافية في أتش تي أم أل
مثال 1. صورة شفافة بلغة html
يتم عرض الصورة الأولى بدون شفافية ، والثانية بـ 0.5 شفافية
المثال رقم 2. التأثيرات مع الشفافية في html
بشكل افتراضي ، تكون الكتلة شفافة جزئيًا. عندما تحوم فوق الماوس ، تصبح الكتلة مشرقة. غالبًا ما تستخدم هذه التأثيرات في تصميم مواقع الويب.
يتم تحويل الصفحة إلى ما يلي
مثال رقم 3. كتلة شفافة على الصورة في html
يوجد أدناه مثال على كتلة شبه شفافة تخفي الصورة جزئيًا. تعمد الكتلة تغطية الصورة بشكل غير كامل لإظهار كيف تبدو على خلفية فارغة.
يتم تحويل الصفحة إلى ما يلي
لقد كانت الشفافية في CSS تقنية شائعة جدًا مؤخرًا وتسبب صعوبات في التنفيذ عبر المستعرضات. حتى الآن ، لا توجد طريقة واحدة تناسب الجميع لتطبيق الشفافية عبر جميع المتصفحات. في الآونة الأخيرة ، ومع ذلك ، فقد تحسن الوضع بشكل ملحوظ.
تلقي هذه المقالة نظرة تفصيلية على الأساليب الحالية ، وتوفر أمثلة وتوضيحات للرموز لمساعدتك في تحقيق نفس النتيجة في جميع المتصفحات بأقل جهد ممكن.
هناك نقطة أخرى جديرة بالذكر وهي أنه على الرغم من وجود الشفافية منذ عدة سنوات ، إلا أنها لم تكن أبدًا جزءًا من معيار CSS. هذه خاصية غير قياسية ويجب أن تكون جزءًا من مواصفات CSS3.
النهج القديم
في الإصدارات القديمة من Firefox و Safari ، تحتاج إلى تطبيق الخاصية مثل هذا:
#myElement (-khtml-opacity: .5؛ -moz-opacity: 0.5؛)
تم استخدام خاصية -khtml-opacity في الإصدارات القديمة من متصفحات webkit. تم إهمال هذه الخاصية ولم تعد هناك حاجة إليها ما لم تكن متأكدًا من أن جزءًا كبيرًا من حركة المرور على موقعك يأتي من الزائرين الذين يستخدمون Safari 1.x ، وهو أمر غير مرجح بالطبع.
يستخدم السطر التالي خاصية -moz-opacity ، والتي عملت على الإصدارات القديمة جدًا من محرك Mozilla. أنهى Firefox الدعم له في الإصدار 0.9.
شفافية CSS في Firefox و Safari و Chrome و Opera
بالنسبة لمعظم المتصفحات الحديثة ، فإن الخاصية التالية كافية:
#myElement (عتامة: .7 ؛)
في المثال أعلاه ، تم ضبط العنصر على قيمة عتامة 70٪ (عتامة 30٪). أي ، إذا قمنا بتعيين القيمة على واحد ، فسيكون العنصر معتمًا ، وبالتالي ، فإن تعيين هذه القيمة على الصفر سيجعلها غير مرئية.
تعالج خاصية العتامة رقمين عشريين. وهذا يعني أن القيمة ".01" ستختلف عن القيمة ".02" ، على الرغم من أنها ليست ملحوظة جدًا.
شفافية CSS لبرنامج Internet Explorer
كالعادة ، لا يتوافق Internet Explorer مع المتصفحات الأخرى بشكل ودي. بالإضافة إلى ذلك ، لدينا الآن ثلاثة إصدارات من هذا المتصفح مستخدمة على نطاق واسع إلى حد ما ، حيث يختلف إعداد الشفافية في كل منها ويتطلب أحيانًا جهودًا إضافية للحصول على نتيجة إيجابية.
#myElement (مرشح: ألفا (عتامة = 40) ؛)
يستخدم هذا المثال خاصية التصفية ، التي تعمل في الإصدارات 6-8 ، ولكن هناك قيد واحد للإصدارات 6 و 7: يجب أن يكون للعنصر خاصية hasLayout الخاصة به مضبوطة على true. هذه الخاصية موجودة فقط في IE ويمكنك قراءة المزيد عنها ، على سبيل المثال ، في Habré.
هناك طريقة أخرى لتعيين الشفافية باستخدام CSS في IE8 وهي استخدام النهج التالي (لاحظ التعليقات):
#myElement (filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 40)؛ / * يعمل في IE6 و IE7 و IE8 * / -ms-filter: "progid: DXImageTransform.Microsoft.Alpha (عتامة = 40)" ؛ / * IE8 فقط * /)
سيعمل السطر الأول في جميع الإصدارات المستخدمة حاليًا ، والثاني فقط في IE8. لاحظ أن السطر الثاني يستخدم البادئة -ms- ويتم تحديد القيمة.
إعداد وتغيير شفافية CSS باستخدام JavaScript أو jQuery
يمكنك استخدام الكود التالي لضبط الشفافية:
Document.getElementById ("myElement"). Style.opacity = ".4"؛ // لمعظم المتصفحات document.getElementById ("myElement"). style.filter = "alpha (opacity = 40)"؛ // لـ IE
بالطبع ، في هذه الحالة يكون استخدام jQuery أسهل بكثير ، بالإضافة إلى أنه سيعمل في جميع المتصفحات:
$ ("# myElement"). css ((عتامة: .4))؛ // يعمل في جميع المتصفحات
يمكنك تحريك هذه الخاصية:
$ ("# myElement"). animate ((opacity: .4)، 1000، function () (// Animation complete؛ هذا الكود يعمل في جميع المتصفحات.))؛
وظيفة RGBA
من المخطط دعم قناة ألفا في CSS3 باستخدام وظيفة rgba. تعمل هذه الميزة في Firefox 3+ و Opera 10.1+ و Chrome 2+ و Safari 3.1+. يتم استخدامه على النحو التالي:
#rgba (الخلفية: rgba (98 ، 135 ، 167 ، .4) ؛)
في هذه الحالة ، تشير المعلمة الأخيرة إلى مستوى التعتيم.
وظيفة HSLA
على غرار الوظيفة السابقة ، يتيح لك CSS3 أيضًا تعيين لون شبه شفاف باستخدام وظيفة HSLA ، والتي تكون معلماتها هي Hue و Saturation و Lightness و Alpha Channel.
# هسلا (الخلفية: هسلا (207 ، 38٪ ، 47٪ ، .4) ؛)
من النقاط المهمة عند استخدام وظائف rgba و hsla أن إعداد العتامة لا يتم تطبيقه على العناصر الفرعية ، بينما يتم توريث خاصية العتامة.