هناك ثلاث طرق لتغيير شفافية عنصر في 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).

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

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

سمة لون الخلفية

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

سمة موضع الخلفية

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

body (background-position: right center؛) - في هذا المثال ، ستكون الخلفية على الجانب الأيمن من الصفحة ، والمسافات العلوية والسفلية للصورة هي نفسها.

سمة حجم الخلفية

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

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

سمة مرفق الخلفية

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

• مثبت- يجعل الصورة على الخلفية ثابتة ؛
• التمرير- مخطوطات الخلفية مع باقي العناصر ؛
• محلي- يتم تمرير الصورة في الخلفية إذا كان المحتوى يتنقل. يتم التقاط الخلفيات التي تتجاوز المحتوى.

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

الجسم (الخلفية - مرفق ثابت).

لا يدعم Firefox حاليًا الخاصية الأخيرة (محلية).

سمة أصل الخلفية

هذه السمة مسؤولة عن تحديد موضع العنصر. تتطلب المتصفحات السابقة استخدام البادئات. تحتوي الخاصية نفسها على ثلاث معلمات:

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

إذا تم تقديم قيم متعددة ، يمكن أن تتفاعل المتصفحات بشكل مختلف: يقبل Firefox و Opera الخيار الأول فقط.

سمة تكرار الخلفية

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

• لا تكرار- تظهر الصورة على الصفحة في نسخة واحدة ؛
• كرر- تتكرر الخلفية على طول محوري x و y ؛
• كرر- x- أفقيًا فقط ؛
• كرر ص- عموديا فقط
• الفراغ- تتكرر الخلفية ، ولكن إذا تعذر ملء الفراغ ، تظهر فراغات بين الصور ؛
• مستدير- يتم تحجيم الصورة إذا كان من المستحيل ملء المنطقة بأكملها بالصور.

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

الجسم (تكرار الخلفية: عدم التكرار)- بصورة مماثلة تكرار الخلفية: كرر ص.

في CSS3 ، من الممكن تعيين قيم لصور متعددة من خلال سرد المعلمات مفصولة بفواصل.

سمة مقطع الخلفية

تحدد هذه السمة سلوك الخلفية أسفل الحدود (على سبيل المثال ، في حالة الحدود المتقطعة):

• الحشو مربع- يتم عرض الخلفية بدقة داخل الكتلة ؛
• مربع الحدود- الصورة تحت الإطارات ؛
• مربع المحتوى- تظهر الصورة في الخلفية داخل المحتوى فقط.

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

الجسم (مقطع الخلفية: مربع المحتوى ؛).

يتطلب Chrom و Safari البادئة -webkit-.

سمات التعتيم والتصفية

تتيح لك سمة العتامة ضبط شفافية الخلفية - ستعمل خاصية CSS في جميع المتصفحات. يتم تعيين القيمة في النطاق من 0.0 إلى 1.0 ضمناً. في هذه الحالة ، يمكنك تعيين شفافية خلفية CSS بدون قيمة عدد صحيح: بدلاً من 0.3 ، يكفي كتابة 3:

.block (صورة الخلفية: url (img.png) ؛ التعتيم: .3 ؛).

لتعيين شفافية الخلفية ، التي سيعمل CSS منها حتى مع IE أسفل الإصدار التاسع ، استخدم سمة التصفية:

.block (صورة الخلفية: url (img.png) ؛ عامل التصفية: alpha (عتامة = 30) ؛).

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

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

في هذا الدرس ، سوف نقوم بتحليل مثل هذه 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.

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

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