شفافية 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+.

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

متعلق متصفح فايرفوكسقبل الإصدار 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; /* يدعم كونكيورر 3.1 وسفاري 1.1 */ العتامة: 0.5; /* يدعم جميع المتصفحات الأخرى */

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

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

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

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

نتيجة:

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

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

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

شفافية الخلفية باستخدام CSS.

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

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

رمز المثال:

هذه هي نتيجة الكود المنشور أعلاه:

أهلا بالجميع. سأخبرك اليوم بكيفية تعيين لون شفاف في CSS. حاليا هناك 3 طرق للقيام بذلك.

الطريقة الأولى - قيمة شفافة

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

اللون: شفاف؛

لن يكون هذا النص مرئيًا على الصفحة.

الطريقة الثانية - وضع الألوان rgba

وهذا ابتكار CSS3. في السابق، لم يكن هناك مثل هذا الوضع في تطوير الويب، ولم يكن هناك سوى RGB. بالتأكيد أنت تعرف كيفية تسجيل اللون بهذا التنسيق. للقيام بذلك، تحتاج إلى تحديد ثلاث قيم بين قوسين من 0 إلى 255، للإشارة إلى تشبع أحد الألوان الأساسية الثلاثة (الأحمر، الأخضر، الأزرق). على سبيل المثال:

الخلفية: rgb(230, 121, 156);

لا يختلف تنسيق rgba، فهو يضيف فقط قيمة رابعة - درجة شفافية العنصر من 0 إلى 1. بشكل عام، يُستخدم تنسيق التسجيل هذا بشكل أساسي لتعيين لون شفاف، وليس شفافًا تمامًا. لتحقيق الشفافية الكاملة، ما عليك سوى كتابة 0 كقيمة رابعة.

الخلفية: rgba(0, 0, 0, 0);

في هذه الحالة، لا تلعب الأرقام الثلاثة المتبقية دورًا خاصًا.

يمكن تعيين اللون الشفاف إذا تم تعيين المعلمة الرابعة على قيمة من 0.01 إلى 0.99. لقد كتبت بالفعل القليل عن ضبط الشفافية للخلفية في هذه المقالة، يمكنك قراءتها إذا كنت مهتمًا.

الطريقة الثالثة - التعتيم

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

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

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

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

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

سأحاول تقديم مجموعات مختلفة من مفاتيح الاختصار.

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

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

افتح الصورة المطلوبة في المحرر. الآن لنقم بإنشاء خلفية شفافة للطبقة. في نافذة "الطبقات"، انقر نقرًا مزدوجًا على الطبقة المضافة - سيكون هناك قفل مقابلها. سيتم فتح نافذة "طبقة جديدة"، انقر فوق "موافق" فيها. بعد ذلك سيختفي القفل.

حدد أداة "العصا السحرية". في شريط الخصائص، حدد مستوى الحساسية، واضبط قيمًا مختلفة لفهم كيفية عملها، على سبيل المثال، 20 و100. لإلغاء تحديد الصورة، اضغط على "Ctrl+D".

اضبط الحساسية وانقر على منطقة الخلفية بالعصا السحرية. لإضافة الأجزاء غير المحددة إلى الخلفية المحددة، اضغط باستمرار على "Shift" واستمر في التحديد. لحذف المناطق المحددة، انقر فوق "حذف".

الآن بدلاً من الخلفية توجد رقعة شطرنج - وهذا يعني أننا تمكنا من جعل الخلفية البيضاء شفافة. إزالة التحديد - "Ctrl + D".

إذا كان لديك صورة أو صورة تحتوي على الكثير من الألوان والكائنات المختلفة، فلنلقِ نظرة على كيفية إنشاء خلفية شفافة للصورة في Photoshop.

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

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

ولعرض النتيجة اضغط على "س". سيتم تمييز أجزاء الصورة التي ستصبح شفافة باللون الوردي.

انسخ المناطق المحددة بالضغط على "Ctrl + C". بعد ذلك، قم بإنشاء ملف جديد، “Ctrl+N”، بخلفية شفافة.

الصق الأجزاء المنسوخة فيها "Ctrl + V". إذا كانت هناك أي أجزاء غير ضرورية من الخلفية متبقية عليها، فقم بإزالتها باستخدام أداة الممحاة. نقوم بحفظ الصور الملتقطة على خلفية شفافة بتنسيق PNG أو GIF.

اجعل الخلفية البيضاء للصورة شفافة، أو قم بإنشاء خلفية شفافة لأجزاء فردية من صورة ملونة أو صورة فوتوغرافية في Photoshop. بعد ذلك، يمكنك استخدامها عند الضرورة: قم بإدراجها في موقع ويب، أو إضافتها إلى رسم آخر، أو إنشاء صور مجمعة مثيرة للاهتمام.

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

يتم إنشاء شفافية الخلفية على الموقع من خلال خصائص CSS. يمكنك تحقيق الشفافية بطريقتين: من خلال خاصية العتامة والخلفية:rgba(). دعونا نلقي نظرة على كل واحد منهم ثم نجري مقارنة.

1. خاصية عتامة CSS لشفافية الخلفية

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

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

العتامة: 0.5؛ // عتامة الشفافية: 0.2؛ // الكائن مرئي فقط بنسبة 20% من العتامة: 0.8; // الكائن مرئي بنسبة 80% فقط

دعونا نلقي نظرة على مثال مع خاصية العتامة.

النص شفاف أيضًا