يتحسن تطوير الويب باستمرار ، واليوم هناك العديد من الطرق لإنشاء صفحات ويب مثيرة للاهتمام وفريدة من نوعها. إحدى هذه الطرق هي تراكب كتلة على صورة باستخدام طرق كس.
تتيح لك هذه الطريقة إنشاء مجموعة متنوعة من التأثيرات وتصميم مبهج من الناحية الجمالية على صفحة الويب. يمكن استخدام هذا التراكب ، على سبيل المثال ، للتأكيد على المعلومات المهمة أو إنشاء اهتمام مرئي.
واحدة من الطرق الرئيسية لتراكب كتلة على صورة هو استخدام تحديد المواقع كس. في هذه الحالة ، يتم وضع الكتلة بالنسبة للعنصر الأصل ، وهو صورة. للقيام بذلك ، تحتاج إلى تطبيق موقف خصائص كس وأعلى (أو خصائص تحديد المواقع الأخرى).
طريقة أخرى شائعة هي استخدام صورة الخلفية. في هذه الحالة ، تصبح الكتلة قابلة للاختراق للخلفية ، وخلفية الكتلة هي صورة. يتم استخدام صورة خلفية خاصية كس لهذا الغرض.
- كيفية إنشاء تأثير مع تراكب كتلة على صورة في كس
- الأدوات والتقنيات اللازمة لخلق تأثير تركيب كتلة على صورة في كس
- كيفية جعل التعتيم كتلة وجعلها تتداخل مع الصورة
- كيفية تغيير حجم كتلة تراكب الصورة
- كيفية تغيير موضع الكتلة في الصورة للحصول على التأثير المطلوب
- كيفية إضافة أنماط إضافية إلى كتلة تراكب صورة
- تعليمات لاستخدام تأثير تراكب الكتلة على صورة في كس
- سؤال وجواب
- كيف يمكنني تطبيق كتلة على صورة في المغلق?
- كيف يمكنني جعل كتلة تغطي تماما الصورة?
- كيف يمكنني جعل كتلة لا تغطي الصورة, ولكن تكون شفافة?
كيفية إنشاء تأثير مع تراكب كتلة على صورة في كس
يعد إنشاء تأثير عن طريق تركيب كتلة على صورة في كس تقنية شائعة إلى حد ما لإنشاء محتوى مثير للاهتمام وجذاب من الناحية الجمالية على صفحات الويب. من خلال تطبيق كتلة على صورة ، يمكنك إضافة عناصر أو نص أو أزرار إضافية أو تغيير النمط العام للصورة.
لإنشاء تأثير تركيب كتلة على صورة ، يمكنك استخدام عدة طرق مختلفة:
- طريقة تستخدم المواضع النسبية
- طريقة استخدام المواقف المطلقة
- طريقة باستخدام صور الخلفية
1. الطريقة باستخدام المواضع النسبية:
عند استخدام هذه الطريقة ، يتم وضع كتلة المحتوى أعلى الصورة باستخدام المواضع النسبية. على سبيل المثال ، يمكنك إنشاء عنصر أصل يحتوي على صورة كصورة خلفية ، والعنصر الفرعي الذي يحتوي على محتوى له موضع نسبة إلى العنصر الأصل.
|
2. طريقة استخدام المواقف المطلقة:
يمكن أيضا استخدام المواضع المطلقة لإنشاء تأثير تركيب كتلة على الصورة. في هذه الحالة ، سيتم وضع كتلة المحتوى أعلى الصورة دون التأثير على بقية عناصر الصفحة.
لإنشاء تأثير ، تحتاج إلى:
|
3. طريقة استخدام صور الخلفية:
هناك طريقة أخرى لإنشاء تأثير تركيب كتلة على صورة وهي استخدام صورة خلفية لكتلة تحتوي على محتوى. في هذه الحالة ، تصبح الصورة خلفية كتلة المحتوى.
لإنشاء تأثير ، تحتاج إلى:
|
وبالتالي ، باستخدام إحدى هذه الطرق ، يمكنك إنشاء تأثير عن طريق تركيب كتلة على صورة كس وإعطاء صفحة الويب مظهرا أكثر جاذبية.
الأدوات والتقنيات اللازمة لخلق تأثير تركيب كتلة على صورة في كس
لإنشاء تأثير تركيب كتلة على صورة في كس ، تحتاج إلى استخدام عدد من الأدوات والتقنيات. يتم سرد أهمها أدناه:
- .
- لتحديد التسلسل الهرمي للعناصر.
- يسمح لك بتعيين شفافية العنصر. غالبا ما يتم استخدامه لإنشاء تأثيرات تركيب كتلة على صورة عند تغيير الشفافية.
- يسمح لك بتعيين صورة الخلفية أو لون العنصر. عند تراكب كتلة على صورة ، يمكنك تعيين صورة خلفية للكتلة لإنشاء تأثير تراكب.
بالإضافة إلى هذه الأدوات والتقنيات ، يمكن استخدام مجموعات مختلفة من الخصائص والتقنيات الأخرى لإنشاء تأثير تركيب كتلة على صورة في كس ، اعتمادا على متطلبات محددة والتأثير المطلوب.
كيفية جعل التعتيم كتلة وجعلها تتداخل مع الصورة
غالبا ما يحتاج مطورو الويب إلى إنشاء تأثيرات عتامة وكتل تراكب على الصور. في هذه المقالة ، سوف ننظر في كيفية تحقيق مثل هذه الآثار باستخدام أساليب كس.
قد تعتمد طريقة تحقيق التعتيم وكتل التراكب على الصور على متطلبات المشروع وحالة الاستخدام. فيما يلي بعض الطرق التي يمكنك استخدامها:
باستخدام خاصية التعتيم:
يمكن أن تتراوح من 0 (شفافة تماما) إلى 1 (مبهمة تماما).
أكبر من 0 (على سبيل المثال ، 0.5) واضبط موضع الكتلة بحيث يكون أعلى الصورة.
استخدام خاصية لون الخلفية بقيمة شفافة:
، حيث تحدد المعلمة الأخيرة (0.5) الشفافية.
أيضا ، لكي تكون الكتلة أعلى الصورة ، تحتاج إلى ضبط موضع الكتلة.
يعتمد اختيار كيفية تحقيق التعتيم وكتل التراكب على الصور على احتياجاتك ومتطلبات المشروع. استخدم الطرق الموضحة أعلاه وجربها لتحقيق التأثير المطلوب.
كيفية تغيير حجم كتلة تراكب الصورة
يمكن تغيير أبعاد الكتلة المتراكبة على الصورة باستخدام طرق كس. للقيام بذلك ، يمكنك استخدام خصائص العرض والارتفاع.
تسمح لك خاصية العرض بتعيين عرض الكتلة. على سبيل المثال ، استخدام قيمة بالنسب المئوية أو وحدات البكسل:
- العرض: 50 — - سوف تأخذ الكتلة نصف عرض الصورة;
- العرض: 200 بكسل-سيكون للكتلة عرض ثابت يبلغ 200 بكسل.
تتيح لك خاصية الارتفاع ضبط ارتفاع الكتلة. أمثلة على القيم:
- الارتفاع: 100٪ - ستشغل الكتلة ارتفاع الصورة بالكامل;
- الارتفاع: 150 بكسل — سيكون للكتلة ارتفاع ثابت يبلغ 150 بكسل.
يمكنك أيضا استخدام خاصية العرض الأقصى لتعيين الحد الأقصى لعرض الكتلة. على سبيل المثال:
- أقصى عرض: 300 بكسل-لن يتجاوز عرض الكتلة 300 بكسل.
إذا كنت بحاجة إلى الاحتفاظ بنسب الكتلة عند تغيير الحجم ، فيمكنك استخدام خصائص العرض والحشو العلوي. على سبيل المثال:
- اضبط عرض الكتلة باستخدام العرض;
- اضبط ارتفاع الكتلة باستخدام الحشو العلوي ، مع تحديد قيمة النسبة المئوية.
على سبيل المثال:
- العرض: 200 بكسل;
- الحشو الأعلى: 100%;
وبالتالي ، سيكون للكتلة عرض 200 بكسل وارتفاع يساوي عرض الكتلة.
كيفية تغيير موضع الكتلة في الصورة للحصول على التأثير المطلوب
طريقة واحدة لتغيير موقف كتلة في صورة باستخدام أساليب كس هو استخدام خاصية الموقف.
باستخدام خاصية الموضع ، يمكنك تعيين الموضع المطلق أو النسبي للكتلة. يسمح لك الموضع المطلق بتعيين إحداثيات الكتلة بالنسبة لأقرب أصل لها مع تحديد موضع معين ، ويسمح لك الموضع النسبي بتعيين إزاحة الكتلة بالنسبة إلى موضعها الطبيعي.
أولا ، تحتاج إلى تعيين موضع العنصر الأصل ، في حالتنا سيكون نسبيا. سيسمح هذا للكتلة بالتداخل مع الصورة مع البقاء داخل هذا العنصر الأصل.
- قم بإنشاء عنصر أصل ، على سبيل المثال
- .
- تعيين تحديد المواقع لهذا العنصر عن طريق إضافة السطر التالي إلى ملف كس: .صورة-حاوية { الموضع: نسبي؛}
- أدخل صورة داخل الكتلة الأصلية ، على سبيل المثال ، باستخدام علامة.
- قم بإنشاء كتلة تريد تراكبها على الصورة ، على سبيل المثال ، باستخدام علامة
كتلة النص
.
| قم بتعيين الموضع المطلق أو النسبي لهذه الكتلة في ملف كس عن طريق إضافة سطر .تراكب-كتلة { الموضع: مطلق؛}. | بعد الانتهاء من هذه الخطوات ، سيتم وضع الكتلة أعلى الصورة. إذا كنت بحاجة إلى تعيين خصائص أخرى ، مثل الأبعاد والهوامش ولون الخلفية وما إلى ذلك.، يمكنك إضافة أنماط مناسبة للكتلة والصورة. |
|---|---|
أعلى: 50%;
Текстовый блок
- كيفية إضافة أنماط إضافية إلى كتلة تراكب صورة
- لون الخلفية: اختيار لون الخلفية المناسب للكتلة بحيث يطابق الصورة ويسلط الضوء عليه بصريا. استخدم العقار
- لتعيين اللون المطلوب.
في هذا المثال ، سيكون للكتلة أبعاد 200 بكسل في 100 بكسل ، وملء خلفي شبه شفاف ، ونص أبيض في المنتصف ومسافة بادئة بمقدار 10 بكسل ، وتركزت أفقيا وعموديا في الصورة.
عند إنشاء كتلة التي سيتم فرضه على صورة باستخدام أساليب كس ، يمكنك إضافة أنماط إضافية لتعزيز تأثير وتحسين المظهر. هناك عدة طرق للقيام بذلك أدناه:
لون الخلفية
الشفافية: إذا كنت تريد جعل الكتلة شفافة جزئيا ، فيمكنك استخدام الخاصية
التعتيم
. يجب أن تكون القيمة في النطاق من 0 إلى 1 ، حيث يكون 0 شفافية كاملة و 1 عتامة كاملة.
الظل: يمكن أن تساعد إضافة ظل إلى كتلة في إنشاء العمق والحجم. استخدم العقار
مربع الظل
لتعيين قيم الظل المطلوبة.
الحدود: إذا كنت ترغب في تسليط الضوء على الحدود من كتلة ، يمكنك استخدام الخاصية
الحدود
. اختر اللون والسماكة ونمط الحدود المناسب.