مع ظهور 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. إذا لم تتمكن من تثبيت إصدارات قديمة من المتصفحات ، فابحث عن خدمة ستتحقق من الموقع متصفحات مختلفةعبر الانترنت.

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

مثال على صورة وردة وردية بدون تغييرات وبعد استبدال الخلفية العادية بالشفافية والأبيض والأخضر:

المثال الأولمع وردة على خلفية شفافة مصنوعة بالإعدادات التالية:
1) شدة الاستبدال - 38 ؛
2) الصقل على طول الحواف - 5 ؛
3) استبدال الخلفية العادية بالشفافية ؛
4) الاقتصاص (<0) или Добавление (>0) حول الحواف - "-70" ؛
5) عكس - معطل (بدون خانة اختيار).

لخلق المثال الثاني، بخلفية بيضاء ، تم استخدام نفس الإعدادات كما في المثال الأول ، باستثناء المعلمة: "استبدال الخلفية العادية بـ" - أبيض. الخامس المثال الثالث، بخلفية خضراء ، يتم استخدام الإعدادات أيضًا ، كما في المثال الأول ، باستثناء المعلمة: "color in hex" - # 245a2d.

الصورة الأصلية لا تتغير بأي شكل من الأشكال. سيتم تزويدك بصورة معالجة أخرى بخلفية شفافة أو محددة.

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

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

إنشاء خلفية شفافة في 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

فلاد مرزفيتش

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

PNG كخلفية

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

أرز. 1. صورة لإنشاء الخلفية

ثم نضيف الصورة كخلفية من خلال خاصية background كما هو موضح في المثال 1.

مثال 1. استخدام نمط شفاف

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

تظهر نتيجة هذا المثال في الشكل. 3.

أرز. 2. تطبيق خلفية

لا يعمل مستعرض Internet Explorer 6 القديم مع الشفافية في PNG-24 ، إذا كنت بحاجة إلى دعم هذا المستعرض لسبب ما ، فسيتعين عليك استخدام البرامج النصية له.

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

صورة متقلب

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

أرز. 3. نمط متقلب موسع

هكذا تبدو في النهاية (الشكل 4).

أرز. 4. محاكاة الشفافية

يمكن مقارنة عيوب هذه الطريقة بالطريقة السابقة ؛ يمكن أيضًا أن يحدث نمط تموج في النسيج ويتدهور النص.

خاصية التعتيم

تحدد خاصية العتامة CSS 3 قيمة العتامة وتتراوح من 0 إلى 1 ، حيث يكون الصفر هو الشفافية الكاملة للعنصر والأخرى معتم. خاصية العتامة لها ميزة خاصة - الشفافية ممتدة لجميع الأطفال ، ولا يمكن أن تتجاوز قيمة الشفافية لوالدهم. اتضح أنه لا يمكن أن يكون هناك نص معتم على خلفية شفافة (المثال 2).

مثال 2. استخدام العتامة

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

تظهر نتيجة المثال في الشكل. 5.

أرز. 5. شفافية النص والخلفية

في Internet Explorer حتى الإصدار 8.0 ويتضمن ذلك ، لا يعمل التعتيم ، لذلك يستخدم خاصية التصفية الخاصة بالمستعرض. بطبيعة الحال ، ينتج عنه CSS غير صالح.

RGBA

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

لون الخلفية: rgba (r ، g ، b ، a) ؛

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

لا تدعم جميع المتصفحات هذا التنسيق: Internet Explorer من الإصدار 9 ، و Opera من الإصدار 10 ، و Firefox من الإصدار 3 ، و Safari من الإصدار 3.2. لكن بشكل عام ، تقدم المتصفحات الحديثة الشفافية بشكل صحيح. بالنسبة للإصدارات الأقدم من IE ، يمكنك تحديد اللون بشكل منفصل بالتنسيق المعتاد ، بينما ، بالطبع ، لن تكون هناك شفافية. أو مرة أخرى ، استخدم خاصية التصفية ، ولكن بعد ذلك عليك أن تتحمل شفافية النص أيضًا (المثال 3). للحفاظ على CSS صالح ، استخدمت التعليقات الشرطية.

مثال 3. استخدام RGBA

HTML5 CSS3 IE Cr Op Sa Fx

يمكن رؤية نتيجة المثال في الشكل. 6.

أرز. 6. خلفية شبه شفافة مع نص معتم

قارن الصورة بالصورة السابقة ، فالحروف أكثر إشراقًا ووضوحًا.

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

Div (لون الخلفية: أحمر ؛ / * لا ينطبق في IE7 * / لون الخلفية: rgba (255 ، 0 ، 0 ، 0.5) ؛)

يتم حل ذلك عن طريق استبدال خاصية لون الخلفية بالخلفية.

Div (الخلفية: أحمر ؛ / * وهذا يعمل * / الخلفية: rgba (255 ، 0 ، 0 ، 0.5) ؛) ومع ذلك ، هناك تحذير واحد. "يقسم" مدقق CSS في الخلفية إذا تم إعطاؤه قيمة بتنسيق RGBA. ولكن في نفس الوقت يشير بشكل صحيح إلى لون الخلفية. بشكل عام ، كما هو الحال دائمًا ، عليك الاختيار بين المتصفحات والصلاحية.