شفافية CSS هي حل متعدد المستعرضات - 3.8 من أصل 5 مرتكز على 6 الأصوات

في هذا الدرس ، سنلقي نظرة على شفافية CSS ، ونتعلم كيفية جعل العناصر المختلفة للصفحة شفافة وتحقيق التوافق الكامل عبر المستعرضات ، أي نفس العملية لهذا التأثير في المتصفحات المختلفة.

كيفية ضبط شفافية أي عنصر

في CSS3 ، تكون خاصية العتامة مسؤولة عن إنشاء عناصر شفافة ، والتي يمكن تطبيقها على أي عنصر. هذه الخاصية لها قيم من 0 إلى 1 ، والتي تحدد درجة الشفافية. حيث يكون 0 عبارة عن شفافية كاملة (الافتراضي لجميع العناصر) و 1 هو عتامة كاملة. تتم كتابة القيم في كسور: 0.1 ، 0.2 ، 0.3 ، إلخ.

مثال على الاستخدام:

الشفافية عبر المستعرضات

لا تمتلك كل المتصفحات نفس الفهم والتنفيذ لخاصية العتامة المذكورة أعلاه. في بعض الحالات ، تحتاج إلى استخدام اسم خاصية أو عوامل تصفية مختلفة.

يتم دعم خاصية عتامة CSS3 بواسطة الأنواع التالية من المتصفحات Mozilla 1.7+ و Firefox 0.9+ و Safari 1.2+ و Opera 9+.

مثل هذا المتصفح الجيد :) مثل Internet Explorer حتى الإصدار 9.0 لا يدعم خاصية العتامة ولإنشاء شفافية لهذا المتصفح ، تحتاج إلى استخدام خاصية التصفية وقيمة ألفا (Opacity = X) ، حيث يمثل X عددًا صحيحًا في النطاق من 0 إلى 100 الذي يتم من خلاله تحديد مستوى الشفافية. 0 شفاف تمامًا و 100 معتم تمامًا.

اعتبارًا من متصفح Firefox قبل الإصدار 3.5 ، فإنه يدعم خاصية -moz-opacity بدلاً من العتامة.

متصفحات مثل Safari 1.1 و Konqueror 3.1 المبنية على محرك KHTML تستخدم خاصية: -khtml-opacity للتحكم في الشفافية.

كيف تحدد الشفافية في CSS بحيث تبدو متشابهة في جميع المتصفحات؟ لإنشاء حل عبر المستعرض لشفافية العناصر ، لا يحتاجون إلى تسجيل خاصية عتامة واحدة فحسب ، بل مجموعة الخصائص التالية:

عامل التصفية: ألفا (عتامة = 50) ؛ / * شفافية IE * / -moz-opacity: 0.5 ؛ / * دعم Mozilla 3.5 والإصدارات الأقل * / -khtml-opacity: 0.5 ؛ / * دعم Konqueror 3.1 و Safari 1.1 * / عتامة: 0.5 ؛ / * دعم جميع المتصفحات الأخرى * /

شفافية العناصر المختلفة

لنلقِ نظرة على بعض الأمثلة على تعيين الشفافية لعناصر معينة تُستخدم غالبًا في الصفحة.

شفافية CSS للصورة.

دعنا نفكر في عدة خيارات لإنشاء صورة شفافة. في المثال التالي ، الصورة الأولى ليس لها عتامة ، والثانية بها عتامة 50٪ ، والثالثة 30٪.

نتيجة:

الشفافية في CSS عند التمرير فوق الصورة.

غالبًا ما يكون من الضروري جعل صورة أو أي عنصر آخر شفافًا في الوقت الذي يحوم فيه المؤشر فوقه. يمكن القيام بذلك باستخدام فئة CSS الزائفة: hover. للقيام بذلك ، يجب تخصيص فئتين لصورتنا ، أحدهما عادي - ستكون هذه هي الحالة غير النشطة للصورة والفئة الثانية مع: hover pseudo-class ، هنا تحتاج إلى تحديد شفافية الصورة في الوقت الحالي لتحوم المؤشر.

يمكنك رؤية النتيجة في العرض التوضيحي.

شفافية الخلفية لـ CSS.

يجب أن نتذكر هنا أن الشفافية تنطبق على جميع العناصر المتداخلة ولا يمكن أن تكون أكثر شفافية من عنصر متداخل.

كمثال ، سنقدم متغيرًا بخلفية صفحة تم إنشاؤها باستخدام صورة وكتلة بخلفية تم إنشاؤها باستخدام لون وشفافية بنسبة 50٪.

عينة من الرموز:

هنا هو إخراج الكود أعلاه:

في هذا الدرس ، سنقوم بتحليل مثل هذه CSSالخصائص - العتامةو RGBA... ملكية العتامةمسؤول فقط عن شفافية العناصر والوظيفة RGBA- للون والشفافية ، إذا قمت بتحديد قيمة الشفافية لقناة ألفا.

تعتيم CSS

القيمة العددية لـ العتامةمحدد في النطاق من 0.0 إلى 1.0 ، حيث الصفر هو شفافية كاملة ، والواحد ، على العكس من ذلك ، هو عتامة مطلقة. على سبيل المثال ، لكي ترى شفافية بنسبة 50٪ ، تحتاج إلى ضبط القيمة على 0.5. يجب أن يؤخذ في الاعتبار أن العتامةيمتد ليشمل جميع أطفال الوالدين. هذا يعني أن النص الموجود على خلفية شفافة سيكون أيضًا نصف شفاف. وهذا بالفعل عيب كبير للغاية ، فالنص لا يبرز جيدًا.

في لقطة الشاشة ، يمكنك أن ترى بوضوح أن النص الأسود أصبح شفافًا مثل الخلفية الزرقاء.

ديف (
الخلفية: url (images / yourimage.jpg) ؛ / * صورة الخلفية * /
العرض: 750 بكسل ؛
الارتفاع: 100 بكسل ؛
الهامش: تلقائي ؛
}
.أزرق (
الخلفية: # 027av4 ؛ / * لون خلفية شبه شفاف * /
العتامة: 0.3 ؛ / * قيمة شفافية الخلفية * /
الارتفاع: 70 بكسل ؛
}
h1 (
الحشو: 6 بكسل ؛
عائلة الخطوط: Arial Black ؛
وزن الخط: أكثر جرأة ؛
حجم الخط: 50 بكسل ؛
}

شفافية CSS بتنسيق RGBA

تنسيق لتسجيل اللون RGBA، هو بديل أكثر حداثة للممتلكات العتامة. R (أحمر) ، G (أخضر) ، B (أزرق)- يعني: أحمر ، أخضر ، أزرق. الحرف الأخير أ- تعني قناة ألفا التي تحدد الشفافية. RGBAعلى عكس العتامةلايؤثر على الاطفال.

الآن دعنا نلقي نظرة على مثالنا باستخدام RGBA... دعنا نستبدل هذه الخطوط في الأنماط.

الخلفية: ## 027av4 ؛ /* لون الخلفية */
العتامة: 0.3 ؛ / * قيمة شفافية الخلفية * /

إلى السطر التالي

الخلفية: rgba (2 ، 127 ، 212 ، 0.3) ؛

كما ترى ، قيمة الشفافية 0.3 هي نفسها لكلتا الطريقتين.

نتيجة المثال مع RGBA:

تبدو لقطة الشاشة الثانية أفضل بكثير من الأولى.

من خلال اللعب بشفافية خلفية الكتل ، يمكنك تحقيق تأثيرات مثيرة للاهتمام على الموقع. من المهم أن تتخطى هذه الكتل الشفافة تصميمًا متنوعًا ، مثل الصورة. فقط في هذه الحالة سيكون التأثير ملحوظًا. لطالما استخدمت هذه التقنية في التصميم ، حتى قبل ظهور أي منها CSS3، تم تنفيذه بحتة في برامج الجرافيكس.

إذا طلب العميل أن يبدو التصميم جيدًا في الإصدارات القديمة من المتصفح متصفح الانترنتثم أضف الخاصية منقيولا تنس التعليق حتى لا تتأثر صلاحية الكود.

انتاج |

صيغة RGBAمدعومة من قبل جميع المتصفحات الحديثة باستثناء متصفح الانترنت... من المهم أيضًا أن RGBAمرن ، يعمل فقط على عنصر محدد محدد ، دون التأثير على الأطفال. من الواضح أن هذا أكثر ملاءمة لمصمم التخطيط. من الواضح أن خياري لصالح التنسيق RGBAلاستقبال الشفافية في CSS.

من أجل توحيد المواد بشكل أفضل وزيادة الوضوح ، أقترح عليك المضي قدمًا.

لقد كانت الشفافية في 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.

# هسلا (الخلفية: هسلا (207 ، 38٪ ، 47٪ ، .4) ؛)

من النقاط المهمة عند استخدام وظائف rgba و hsla أن إعداد العتامة لا يتم تطبيقه على العناصر الفرعية ، بينما يتم توريث خاصية العتامة.

فلاد مرزفيتش

يظهر تأثير الشفافية لعنصر ما بوضوح في صورة الخلفية وقد انتشر على نطاق واسع في أنظمة التشغيل المختلفة ، لأنه يبدو أنيقًا وجميلًا. في تصميم الويب ، يتم أيضًا تطبيق الشفافية وتحقيقها من خلال خاصية العتامة أو تنسيق ألوان 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 شفافية

شفافية العنصر

جعل الصورة شبه شفافة عند التحويم!

مصدر التحميل

شكرا للانتباه!

المقال التالي
كيفية إنشاء كتلة div التمرير؟