إنشاء خلفية شبه شفافة css. شفافية خلفية CSS. خلفية شفافة أو نص باستخدام CSS. سمات التعتيم والتصفية
نهارك سعيد ، خبراء تطوير الويب ، بالإضافة إلى مبتدئينها. بالنسبة لأولئك الذين لا يتابعون اتجاهات مجال تكنولوجيا المعلومات ، أو بالأحرى موضة الويب ، أود أن أبلغكم رسميًا أن هذا المنشور حول الموضوع: "كيفية إنشاء كتلة شفافة باستخدام أدوات css" هي الطريقة المناسبة لك . في الواقع ، في عام 2016 الحالي ، يعتبر إدخال العديد من العناصر الشفافة في الخدمات عبر الإنترنت خطوة أنيقة.
لذلك ، في هذه المقالة سوف أخبرك عن جميع الطرق الحالية لخلق الشفافية ، بدءًا من الحلول السابقة للطوفان ، وسأركز على توافق الحلول مع المتصفحات ، وأيضًا إعطاء أمثلة محددة عن كود البرنامج. اذهب الآن إلى العمل!
الطريقة 1. Antediluvian
متى كانت لا تزال أجهزة كمبيوتر ضعيفةولم يتم تطوير "القدرات" ، فقد توصل المطورون إلى طريقتهم الخاصة في إنشاء خلفية شفافة: استخدام البكسلات الشفافة بالتناوب مع تلك الملونة. وهكذا ، فإن الكتلة التي تم إنشاؤها تبدو مثل لوحة الشطرنج عند تحجيمها ، ولكن في حجمها الطبيعي بدت وكأنها نوع من الشفافية.
هذا ، في رأيي ، "عكاز" بالطبع يساعد في الإصدارات القديمة من المتصفحات التي لا تعمل فيها الحلول الحديثة. لكن من الجدير بالذكر أن جودة عرض النص , المدرج في مثل هذا ، يسقط بشكل حاد.
الطريقة 2. غير مرتبك
في حالات نادرة ، يحل المطورون المشكلة بإدخال صورة شبه شفافة بإدخال ... صورة شبه شفافة جاهزة! لهذا ، يتم استخدام الصور المحفوظة بتنسيق PNG-24. ال تنسيق الرسميسمح لك بتعيين 256 مستوى من الشفافية.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
ومع ذلك ، فإن هذه الطريقة ليست مناسبة لعدة أسباب:
- متصفح الانترنت 6 لا يعمل مع هذه التقنية ، فأنت بحاجة إلى كتابة كود البرنامج النصي لها ؛
- لا يمكنك تغيير ألوان الخلفية في css ؛
- إذا تم تعطيل وظيفة عرض الصور في المتصفح ، فسوف تختفي.
الطريقة 3. الملكية
الطريقة الأكثر شيوعًا والأكثر شهرة لجعل الكتلة شفافة هي الخاصية العتامة.
تختلف قيمة المعلمة في النطاق ، حيث يكون الكائن عند 0 غير مرئي ، وفي 1 يتم عرضه بالكامل. ومع ذلك ، هناك بعض اللحظات غير السارة هنا أيضًا.
أولاً ، يرث جميع الأطفال الشفافية. هذا يعني أن النص المدرج سوف "يتألق" مع الخلفية.
ثانيًا ، Internet Explorer مرة أخرى "يُظهر أنفه" ولا يعمل حتى الإصدار 8 معه العتامة.
لحل هذه المشكلة ، استخدم منقي:ألفا (العتامة = القيمة).
لنلقي نظرة على مثال.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
الطريقة 4. الحديثة
اليوم ، يستخدم المحترفون أداة rgba (r ، g ، b ، a).
قبل ذلك ، قلت إن RGB هو أحد نماذج الألوان الشائعة ، حيث يكون R مسؤولاً عن جميع درجات اللون الأحمر ، و G - ظلال من الأخضر و B - ظلال من اللون الأزرق.
في حالة المعلمة cssالمتغير A مسؤول عن قناة ألفا ، والتي بدورها مسؤولة عن الشفافية.
الميزة الرئيسية للطريقة الأخيرة هي أن قناة ألفا لا تؤثر على الكائنات داخل الكتلة المصممة.
rgba (r ، g ، b ، a) مدعوم منذ:
- 10 إصدارات من Opera ؛
- إنترنت إكسبلورر 9 ؛
- سفاري 3.2 ؛
- 3 إصدارات من Firefox.
أريد أن أشير إلى حقيقة مثيرة للاهتمام! يطرح برنامج Internet Explorer 7 المحبوب خطأً عند دمج خاصية ما لون الخلفيةمع اسم الألوان (لون الخلفية: ذهبي). لذلك ، من المفيد استخدام:
لون الخلفية: rgba (255 ، 215 ، 0 ، 0.15)
الآن على سبيل المثال.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
ستجد جميع أنواع الزهور في متجرنا.
|
لاحظ أن محتوى النص للكتلة مرئي تمامًا (100٪ أسود) ، بينما الخلفية مضبوطة على قناة ألفا تبلغ 0.88 ، أي 88٪.
هذا يختتم المنشور. اشترك في مدونتي ولا تنس دعوة أصدقائك. حظا سعيدا في تعلم لغات الويب! مع السلامة!
تُستخدم خاصية العتامة لإنشاء تأثير شفافية في 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 مظهر النص والخلفية بقيم عتامة مختلفة.
يوضح المثال 1 كيفية إنشاء كتلة شبه شفافة باستخدام العتامة.
مثال 1. خلفية على صفحة ويب
HTML5 CSS3 IE 9+ Cr Op Sa Fx
RGBA
عادة ، حسب التصميم ، يجب أن تكون خلفية العنصر فقط شفافة ، ويجب أن يكون النص معتمًا للحفاظ على قابلية القراءة. خاصية العتامة غير مناسبة هنا لأن النص الموجود داخل العنصر سيكون شفافًا جزئيًا أيضًا. من الأفضل استخدام تنسيق RGBA ، والذي تمثل قناة ألفا أو بمعنى آخر قيمة الشفافية جزءًا منه. يتم كتابة القيمة rgba ، ثم يتم سرد قيم مكونات اللون الأحمر والأزرق والأخضر بين أقواس مفصولة بفواصل. الأخير هو الشفافية ، والتي تم تعيينها من 0 إلى 1 (الشكل 1) ، حيث يمثل 0 شفافية كاملة ، ويمثل 1 عتامة اللون.
تين. 1. النحو لاستخدام rgba
يوضح المثال 2 استخدام RGBA لإنشاء خلفية شبه شفافة.
مثال 2. شبه خلفية شفافة
HTML5 CSS3 IE 9+ Cr Op Sa Fx
نتيجة هذا المثالهو مبين في الشكل. 2. تم ضبط قيمة عتامة الخلفية على 90٪.
تين. 2. خلفية شبه شفافة ونص غير شفاف
تتيح لك خاصية CSS RGBa ضبط لون الخلفية بقناة ألفا (أي تعبئة الكتل بلون شبه شفاف).
بالطبع ، هناك خاصية عتامة في CSS ، لكن عيبها الرئيسي هو أن جميع الأطفال داخل كتلة شفافة سيرثون عتامة أيضًا.
في أغلب الأحيان ، يتم تعبئة خلفية العنصر بـ PNG24 ذات بكسل واحد ويتم إصلاح الشفافية في IE6 ، أو تصبح الخلفية شفافة أيضًا من خلال عتامة css. يتم وضع النص بشكل منفصل في عنصر آخر ، لكن هذا ، في رأيي ، ليس مناسبًا جدًا ...
عبر RGBaالحل يبدو كالتالي:
1. لنفترض أننا نريد خلفية زرقاء بنسبة شفافية بنسبة 50٪.
IE6-8 ، Opera 9.x لن يدعمه ، موزيلا فايرفوكس 2.x
2. بالنسبة إلى IE ، يمكنك المحاولة والقيام بمزيد من الرشاقة:
| .element (background: transparent؛ filter: progid: DXImageTransform .Microsoft .gradient (startColorstr = # 990000ff، endColorstr = # 990000ff)؛ Zoom: 1؛) |
ملحوظة: تم ضبط اللون في الفلتر على 8 أرقام. الرقمان الأولان هما درجة الشفافية: FF - معتم تمامًا ، 00 - شفاف. الأرقام الستة التالية هي اصطلاحات ألوان HTML المعتادة.
لا يقتصر استخدام RGBa على لون خلفية الكتل فقط ...
هناك ثلاث طرق لتغيير شفافية عنصر في 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).