دعونا نتحدث عن الاستخدام المتقدم لسمات RGBA المستخدمة حاليًا على نطاق واسع في CSS3. مشكلة توافق هذه السمة بسيطة نسبيًا. يدعم IE8 هذه السمة بالفعل، ويمكن لـ IE6 وIE7 أيضًا دعمها من خلال الاختراقات. تشبه RGBA سمة RBG في CSS2، باستثناء أن سمة RGBA لها تعريف إضافي للشفافية، ويكون شرح سمة RGBA في معيار CSS3 كما يلي:
| /*بناء الجملة الأساسي*/ em { اللون : رغبا ( أحمر , أخضر , أزرق , عتامة ) } /* مثال*/ em { اللون : rgba ( 255 , 0 , 0 , 1 ) } /* أحمر، معتم */ em { اللون : rgba ( 100 % , 0 % , 0 % , 1 ) } /* نفس ما ورد أعلاه*/ |
في الواقع، يعد استخدام ثلاث قيم عشرية من 1 إلى 255 لتحديد اللون أكثر دقة من استخدام النسب المئوية. وفيما يلي قيم RGB لعدة ألوان، عند استخدامه، ما عليك سوى تحويل القيم السداسية العشرية من 00 إلى FF إلى Decimal سيفي بالغرض.
تكمن قوة RGBA في أنه يمكن تقديم المزيد من الألوان من خلال تعريف الشفافية ومزج الألوان في طبقات مختلفة، تمامًا مثل خلط الدهانات. على سبيل المثال، نقوم أولاً بتعيين صورة خلفية للصفحة، ثم نقوم بتعيين لون للمحتوى في H1 للصفحة، على سبيل المثال:
|
ح1 { اللون : رغب ( 0 ، 0 ، 0 ) ؛ لون الخلفية : rgb ( 255 , 255 , 255 ) ; } |
ولكن ماذا سيكون التأثير إذا لم أقم بتعيين الشفافية الشاملة (سمة العتامة) على H1؟
|
ح1 { اللون : رغب ( 0 ، 0 ، 0 ) ؛ لون الخلفية : rgb ( 255 , 255 , 255 ) ; العتامة : 0.5 ؛ } |
التأثير الذي نراه هنا هو أن H1 بأكمله بما في ذلك النص أصبح شفافًا بنسبة 50%. ومع ذلك، تؤثر شفافية النص على القراءة، فلنحاول استخدام خاصية RGBA لتعيين لون خلفية H1 بشكل منفصل.
|
ح1 { اللون : رغب ( 0 ، 0 ، 0 ) ؛ لون الخلفية : rgba ( 255 ، 255 ، 255 ، 0.5 ) ؛ } |
ح1 { |
يمكن استخدام RGBA أينما يلزم تعيين اللون، على سبيل المثال:
| div { اللون : رغب ( 0 ، 0 ، 0 ) ؛ لون الخلفية : rgb ( 255 , 255 , 255 ) ; الحدود : 10px الصلبة rgba ( 255 ، 255 ، 255 ، 0.3 ) ؛ } |
اضبط الشفافية على 30% وحد أبيض خالص بعرض خط يبلغ 10 بكسل لجميع divs.
| شعبة { اللون : رغبا ( 255 ، 255 ، 255 ، 0.8 ) ؛ لون الخلفية : rgba ( 142 ، 213 ، 87 ، 0.3 ) ؛ } شعبة :تحوم { اللون : رغبا ( 255 ، 255 ، 255 ، 1 ) ؛ لون الخلفية : rgba ( 142 , 213 , 87 , 0.6 ) ; } |
قم بالماوس لتغيير الشفافية.
بالإضافة إلى ذلك، إذا تم دمجها مع JavaScript، يمكن لسمات RGBA إنشاء تأثيرات أكثر إبهارًا.
قم بتغيير عادات الكتابة الخاصة بك في CSS
في الأمثلة المذكورة أعلاه، يمكنك أن ترى أن المؤلف كان يستخدم rgb() لتحديد الألوان بدلاً من استخدام النموذج #xxx التقليدي للتمثيل الست عشري. هذه طريقة كتابة معدة لسمة RGBA في CSS3. يمكن فهم استخدام rgb() لتحديد اللون على أن rgba() معتم، ولكن الفرق بين الاثنين صغير جدًا، مما سيوفر راحة كبيرة للترقية إلى rgba. () في المستقبل.
متوافق مع جميع المتصفحات
على الرغم من أن أحدث الإصدارات من المتصفحات الرئيسية تدعم بالفعل سمات RGBA، إلا أنه يجب علينا أيضًا الاهتمام بالمستخدمين الذين يستخدمون المتصفحات الأقدم، لذلك سنكون أكثر أمانًا في بعض الأماكن باستخدام الطريقة القديمة. هناك عدة طرق، ويمكن للجميع الاختيار حسب احتياجاتهم.
على الرغم من أن هذا سيؤثر على التأثير في متصفحات الإصدارات الأقل، إلا أن هذه هي الطريقة الأبسط والأكثر أمانًا. العمليات المحددة هي كما يلي:
| h1 {. اللون : رغب ( 127 ، 127 ، 127 ) ؛ اللون : رغبا ( 0 ، 0 ، 0 ، 0.5 ) ؛ } |
قم بتعيين لون rgb أولاً ثم قم بتعيين لون rgba، بحيث تعرض المتصفحات التي لا تدعم سمة rgba لون rgb فقط، بينما ستعرض المتصفحات التي تدعم rgba لون rgba بسبب إعادة التعريف.
وتتمثل ميزة تنسيق PNG في إمكانية عرض ميزة الشفافية في الصورة على صفحة الويب.
| ح1 { الخلفية : رابط شفاف ( black50.png ) ; الخلفية : رغبا ( 0 ، 0 ، 0 ، 0.5 ) لا شيء ؛ } |
يتم تحقيق نفس تأثير rgba من خلال خلفية PNG بشفافية تبلغ 50%.
استخدام سمات IE الخاصة لحل IE6 وIE7، والتي يمكنها تحقيق بعض التأثيرات نفسها التي يحققها rgba.
| ح1 { عامل التصفية :progid :DXImageTransform .Microsoft .Gradient ( GradientType = 1 , StartColorStr = '#80000000' , EndColorStr = '#80000000' ) ; } |
الرابط الأصلي: الاستخدام المتقدم لسمات CSS3 RGBA
شكرًا لبولو على مساهمته.