إنشاء خلفية شفافة في HTML و CSS (عتامة وتأثيرات RGBA)

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

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

ضع في اعتبارك شفافية النص والخلفية - كيفية استخدامها بشكل صحيح في تصميم موقع الويب:

الميزة الرئيسية لهذه الخاصية هي أن قيمة الشفافية تؤثر على جميع الأطفال بالداخل ، وليس فقط الخلفية. هذا يعني أن الخلفية والنص سيصبحان شبه شفافين. يمكنك زيادة مستوى الشفافية عن طريق تغيير أمر العتامة من 0.1 إلى 1.

HTML 5 CSS 3 IE 9

في تصميم الويب ، يتم أيضًا تطبيق الشفافية الجزئية وتحقيقها من خلال تنسيق ألوان RGBA ، والذي يتم تعيينه فقط لخلفية العنصر.

عادةً ، في التصميمات ، يجب أن تكون خلفية العنصر فقط شفافة ، ويجب أن يكون النص معتمًا للحفاظ على قابلية القراءة. خاصية العتامة غير مناسبة هنا لأن النص الموجود داخل العنصر سيكون شفافًا جزئيًا أيضًا. من الأفضل استخدام تنسيق RGBA ، والذي تعد قناة ألفا جزءًا منه ، أو بمعنى آخر قيمة الشفافية. يتم كتابة القيمة rgba ، ثم يتم سرد قيم مكونات اللون الأحمر والأزرق والأخضر بين أقواس مفصولة بفواصل. الأخير هو الشفافية ، والتي يتم تعيينها من 0 إلى 1 ، حيث يمثل 0 شفافية كاملة ويكون 1 لونًا معتمًا لبناء جملة rgba.

خلفية شفافة HTML 5 CSS 3 IE 9

تم ضبط تعتيم الخلفية على 90٪ - خلفية شبه شفافة ونص معتم.

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

القيم الممكنة

يبدو بناء جملة خاصية العتامة في css كما يلي:

المحدد (العتامة: 1 ؛) المحدد (العتامة: 0 ؛) المحدد (العتامة: 0.4 ؛)

يتم قبول القيم الرقمية في النطاق من 0 إلى 1 كمدخلات. يمكن أن تكون المعلمة جزءًا من واحد ، بينما يتم استخدام النقطة كفاصل للأجزاء الصحيحة والكسرية في CSS.

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

إذا كانت قيمة الخاصية مختلفة عن الصفر ، فسيتم حساب الشفافية الحقيقية كنسبة مئوية من بعض الحد الأعلى. عادةً ، العتامة: 1 تحدد التعتيم الكامل للعنصر.

شفافية العقد الفرعية

ومع ذلك ، إذا كان العنصر له أصل تختلف شفافيته عن أحدهما ، فإن الحساب يتغير. لا يمكن أن يكون السليل "أقل شفافية" من أي من أسلافه. تصبح قيمة عتامة الكتلة الأصلية هي الحد الأعلى لشفافية الطفل.

الأصل (عتامة: 0.7 ؛) طفل (عتامة: 1 ؛)

في هذه الحالة ، سيكون العنصر الفرعي شفافًا بنسبة 30٪ ، على الرغم من ضبط التعتيم على واحد.

أمثلة على استخدام ملفات

مثال 1. الشفافية. من الضروري أن تكون الخلفية الرئيسية للكتلة مرئية تحت العنصر الهدف.

الهدف (الخلفية: أسود ؛ التعتيم: 0.5 ؛)

لا تصبح خلفية الكتلة المستهدفة شفافة فحسب ، بل تصبح أيضًا النص.

مثال 2. التحكم الديناميكي في الشفافية. تتغير قيمة خاصية عتامة CSS للكتلة الهدف عندما تحوم فوقها.

الهدف (عتامة: 0.2 ؛). الهدف: تحوم (عتامة: 1 ؛)

الشفافية الديناميكية

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

للوصول إلى الشفافية من البرنامج النصي ، تحتاج إلى الرجوع إلى كائن النمط لعنصر معين.

// احصل على عتامة var الحالية = element.style.opacity ؛ // تعيين عنصر قيمة جديدة.style.opacity = 0.4 ؛

يمكن تنفيذ تلاشي الكتلة باستخدام خاصية الانتقال CSS:

العنصر (عتامة: 0.1 ؛ انتقال: عتامة 1000 مللي ثانية ؛) العنصر: تحوم (عتامة: 0.8 ؛ انتقال: عتامة 2000 مللي ثانية ؛)

الآن ، ستغير عقدة العنصر التعتيم من 10 إلى 80٪ عند تحريك الماوس خلال ثانية واحدة ، وعندما يغادر المؤشر ، سوف يتلاشى إلى قيمته الأصلية في غضون ثانيتين.

تتيح لك خاصية تعتيم CSS ، جنبًا إلى جنب مع آلية الانتقال ، إنشاء تأثيرات جميلة.

قناة ألفا بدلا من العتامة

التفاصيل الدقيقة لآلية العتامة في CSS:

• لا يمتد تأثيره إلى خلفية الكتلة فحسب ، بل يمتد أيضًا إلى محتواه النصي ، والذي يفضل تركه واضحًا ؛
• لا يمكن أن تكون العناصر الفرعية أقل شفافية من العناصر الرئيسية.

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

لقد كانت الشفافية في 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 الخاصة به مضبوطة على "صحيح". هذه الخاصية موجودة فقط في 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 (Alpha).

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

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

خاصية opacity CSS مسؤولة عن شفافية العناصر (الصور والنصوص والكتل) في html.

بنية عتامة CSS

حيث يمكن أن تأخذ القيمة قيمًا حقيقية في النطاق من 0.0 إلى 1.0. تعني القيمة 1.0 عدم وجود شفافية (افتراضي).

مثال 1. صورة شفافة بلغة html

يتم عرض الصورة الأولى بدون شفافية ، والثانية بـ 0.5 شفافية

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

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

المصدر التجريبي

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

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

Orem Ipsum هو ببساطة نص شكلي يستخدم في صناعة الطباعة والتنضيد. كان لوريم إيبسوم هو النص الوهمي القياسي في الصناعة منذ القرن الخامس عشر الميلادي ، عندما أخذت طابعة غير معروفة لوحًا من النوع وتدافعت عليه لعمل عينة من الكتاب. ولم يبق سوى خمسة قرون ، ولكن أيضًا قفزة في التنضيد الإلكتروني ، بقيت دون تغيير جوهريًا ، وقد انتشرت في الستينيات بإصدار أوراق Letraset التي تحتوي على مقاطع Lorem Ipsum ، ومؤخرًا مع برامج النشر المكتبي مثل Aldus PageMaker بما في ذلك إصدارات Lorem Ipsum.
هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها. الهدف من استخدام لوريم إيبسوم هو أنه يحتوي على توزيع طبيعي -إلى حد ما- للأحرف ، بدلاً من استخدام "هنا يوجد محتوى نصي ، هنا يوجد محتوى نصي" ، مما يجعلها تبدو وكأنها إنجليزية قابلة للقراءة. تستخدم العديد من حزم النشر المكتبي ومحرري صفحات الويب الآن Lorem Ipsum كنموذج افتراضي للنموذج ، وسيكشف البحث عن "lorem ipsum" عن العديد من مواقع الويب التي لا تزال في مهدها. تطورت إصدارات مختلفة على مر السنين ، أحيانًا عن طريق الصدفة ، وأحيانًا عن قصد (روح الدعابة المحقونة وما شابه ذلك).

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

حسنًا ، بادئ ذي بدء ، دعنا نفهم أن وثيقتنا لا تحتوي فقط على مستوى شاشة واحد - إنها ، بشكل عام ، ثلاثية الأبعاد ، كما ذكرت في مقالة "Z-index". وفقًا لذلك ، حتى الطبقة الشفافة تمامًا ، إذا ظهرت في الجزء العلوي من حزمة العرض ، ستمنع الوصول إلى بقية العناصر. هذا هو أحد الاستخدامات الرئيسية للصناديق الشفافة. على الرغم من استخدام تأثير التظليل عادةً ، ستعمل طبقة شفافة تمامًا بنفس الطريقة. لذلك ، على سبيل المثال ، تعمل الكثير من معارض الصور الشهيرة ، حيث يتم تنظيم طبقة مظللة يتم فيها عرض الصور وعناصر التحكم الخاصة بها. بقية الصفحة "مغطاة" بطبقة (شبه) شفافة ، تمنع الوصول إلى جميع العناصر الأخرى في الصفحة. أولئك. لن تتمكن من مغادرة الصفحة بالنقر فوق أي رابط عليها - فكل النص مغطى بطبقة أساسية. للرجوع إلى نص الموقع ، عادةً ما يوفرون عناصر تحكم لإغلاق المعرض ونموذج تسجيل الدخول وما إلى ذلك. السيطرة على إظهار / إخفاء الكتل الشفافة باستخدام جافا سكريبت. هنا ، للأسف ، لا بديل عن ذلك. بدون استخدامه ، لن يرى المستخدم الكتلة الشفافة على الإطلاق ، أو لن يتمكن من إغلاقه دون مغادرة الصفحة الحالية. لاحظ أنه يتم استخدام خصائص الرؤية أو العرض لهذا الغرض.

إذن كيف يتم تنظيم الشفافية في الواقع في لغة تأشير النص الفائق؟ لا يتم تضمين تعيين شفافية العناصر بشكل عام في مواصفات CSS ، لذلك يجب عليك استخدام العديد من الإرشادات في وقت واحد لإنشائه. ستعمل بعض المتصفحات (على سبيل المثال) مع خيار واحد ، والبعض الآخر مع خيار آخر. أي يستخدم وظيفة التصفية المدمجة ، بينما تستخدم المتصفحات الأخرى خاصية "العتامة" ، والتي تتراوح من 0 (كائن شفاف بالكامل) إلى 1 (معتم بالكامل). على سبيل المثال ، في حالة الشفافية بنسبة 30٪ ، اكتب " العتامة: 0.30 ؛ عامل التصفية: ألفا (عتامة = 30) ؛". الخصائص ، كما ترى من المثال ، متشابهة - فقط في الحالة الأولى ، يتم استخدام رقم من 0 إلى 1 ، في الحالة الثانية ، إدخال نسبة مئوية. مثال على مثل هذه الكتلة:

<أسلوب div = "الموضع: مطلق ؛ أعلى: 0 ؛ يسار: 0 ؛ لون الخلفية: RGB (18 ، 114 ، 214) ؛ العرض: 100٪ ؛معرف = "VideoFrame">

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

هذا هو السر الكامل للشفافية في لغة تأشير النص الفائق. نحن نستخدم z-index والتعتيم للحصول على تأثير الشفافية. ويمكنك أن تجد العديد من التطبيقات لهذا - كل شيء هنا يقتصر فقط على خيالك.

08.02.2013 سأجيب على الأسئلة المطروحة في التعليق ، وهي كيفية عمل كتلة مبهمة على كتلة شفافة. كل شيء بسيط هنا ، ليس من أجل لا شيء أشرت إليه في المادة رابطًا للمادة المتعلقة بفهرس z ، فأنت بحاجة إلى إنشاء كتلة أخرى ، بفهرس z أكبر من الكتلة الشفافة. الآن ، في غضون بضع دقائق ، قمت برسم مثال. كتل:

<أسلوب div = "الموضع: مطلق ؛ أعلى: 0 ؛ يسار: 0 ؛ لون الخلفية: RGB (18 ، 114 ، 214) ؛ العرض: 100٪ ؛ الارتفاع: 100٪ ؛ العتامة: 0.30 ؛ عامل التصفية: ألفا (عتامة = 30) ؛ الرؤية: مخفي الفهرس z: 1 ؛ "معرف = "VideoFrame"> <معرف div = نمط "VideoFrame2" = "الموضع: مطلق ؛ أعلى: 25٪ ؛ يسار: 25٪ ؛ لون الخلفية: أبيض ؛ عرض: 50٪ ؛ ارتفاع: 50٪ ؛ العتامة: 0.99 ؛ عامل التصفية: ألفا (عتامة = 99) ؛ الرؤية: مخفي الفهرس z: 2 ؛ " onclick = "جافا سكريبت: HideForm () ؛" >هنا نكتب النص</ div>

ووظائف جافا سكريبت

< script type= "text/javascript" >الوظيفة ShowForm () (document.getElementById ("VideoFrame") .style .visibility = "visual"؛ document.getElementById ("VideoFrame2") .style .visibility = "visual"؛) الوظيفة HideForm () (document.getElementById (" VideoFrame ") .style .visibility =" hidden "؛ document.getElementById (" VideoFrame2 ") .style .visibility =" hidden "؛)

تعرض الوظيفة الأولى كتلة شفافة (جنبًا إلى جنب مع كتلة نص غير شفافة) - يمكن توصيلها بزر. رابط ، وما إلى ذلك. الوظيفة الثانية التي أمتلكها مرتبطة بنقرة بالماوس على كتلة بها نص - إنها تخفي الكتلة الشفافة.

نأمل أن أوضح كيف يعمل. حسنًا ، إذا لم يكن كذلك ، اطرح الأسئلة.