أتش تي أم أل هي لغة ترميز تستخدم لإنشاء صفحات الويب. يسمح لك بإنشاء تأثيرات وعناصر مرئية مختلفة على الصفحة. أحد هذه التأثيرات هو تراكب صورة على أخرى. في هذه المقالة ، سأخبرك بكيفية القيام بذلك باستخدام هتمل.
هناك عدة طرق لتراكب صورة على صورة. واحد منهم هو استخدام تحديد المواقع عنصر المغلق. للقيام بذلك ، تحتاج إلى إنشاء حاوية حيث سيتم وضع كلتا الصورتين. ثم ، باستخدام كس ، يمكنك تعيين المواقع النسبية أو المطلقة لكل من الصور. وبالتالي ، من الممكن تحقيق تأثير تركيب صورة على أخرى.
هناك طريقة أخرى لتراكب الصور وهي استخدام صورة الخلفية. للقيام بذلك ، قم بإنشاء حاوية وتعيين صورة خلفية لها باستخدام كس. ثم ، في هذه الحاوية ، يمكنك إنشاء عنصر آخر ، مثل ديف أو سبان ، وتعيينه صورة خلفية مختلفة. وبالتالي ، يمكنك إنشاء تأثير الصور المتداخلة باستخدام هتمل و كس.
على الرغم من أن هتمل و كس توفر طرق مختلفة لتراكب الصور ، ينبغي أن نتذكر أن الآثار أكثر تعقيدا وتفاعلية قد تتطلب استخدام جافا سكريبت أو المكتبات مثل مسج. ومع ذلك ، بالنسبة للتراكب الأساسي من صورة إلى صورة ، فإن الطرق المذكورة أعلاه بسيطة وفعالة.
- تطبيق صورة على صورة باستخدام كس
- استخدام تحديد المواقع لتراكب الصور
- إنشاء قناع لتراكب الصور في هتمل
- استخدام وضع المزج لمزج الصور بشكل فعال
- أمثلة على تركيب الصور في أتش تي أم أل باستخدام طرق مختلفة
- سؤال وجواب
- كيف يمكنني تراكب صورة على صورة في أتش تي أم أل?
- كيف يمكنني تراكب صورة على صورة أخرى دون استخدام المغلق?
- كيف يمكنني تغيير شفافية صورة تراكب?
- كيف يمكنني تغيير حجم صورة تراكب?
تراكب صورة على صورة باستخدام كس
يمكن لمطوري الويب استخدام كس لإنشاء تأثيرات تجمع بين صور متعددة على صفحة ويب ، بما في ذلك تراكب صورة على أخرى.
لتراكب صورة على صورة باستخدام كس ، يمكنك استخدام خاصية صورة الخلفية وتعيين مسارها إلى الصورة المطلوبة كقيمة.
نموذج التعليمات البرمجية:
- قم بإنشاء حاوية يتم فيها عرض الصورة. على سبيل المثال ، استخدم العلامة
- .
- اضبط أبعاد الحاوية باستخدام خصائص العرض والارتفاع.
- قم بتعيين الصورة المطلوبة كخلفية للحاوية باستخدام خاصية صورة الخلفية.
حدد طريقة تطبيق الصورة على الصورة باستخدام خاصية وضع مزج الخلفية. على سبيل المثال ، يمكنك استخدام قيمة الضرب لمزج الصورة المتراكبة مع الصورة الرئيسية.
نموذج التعليمات البرمجية:
وهكذا ، تراكب صورة على صورة باستخدام كس يسمح لك لخلق تأثيرات بصرية مثيرة للاهتمام على صفحات الويب. تسمح لك القيم المختلفة لخاصية وضع المزج في الخلفية بتجربة تأثيرات مزج ومزج الصور.
استخدام تحديد المواقع لتراكب الصوريمكننا استخدام كس لتحديد المواقع لتراكب صورة واحدة على رأس آخر. للقيام بذلك ، تحتاج إلى تطبيق الموضع المطلق أو النسبي على الحاوية أو الصورة.
1. أولا ، دعنا ننشئ حاوية سيتم وضع الصور فيها:
2. بعد ذلك ، دعنا نضيف أنماطا للحاوية والصور الخاصة بنا:
.حاوية {
موضع: نسبي;
الارتفاع: 500 بكسل;
العرض: 500 بكسل;
}
.صورة1 {
موضع: مطلق;
أعلى: 0;
اليسار: 0;
}
.صورة2 {
موضع: مطلق;
- أعلى: 0;
- اليسار: 0;
التعتيم: 0.5;
}
3. إيلاء الاهتمام لموقف الملكية. استخدمنا هنا القيمة النسبية للحاوية بحيث كانت الصور بداخلها ويمكن فرض الصور السفلية على الصور العلوية. ثم استخدمنا القيمة المطلقة لكل صورة لتعيين موضعها بالنسبة للحاوية.
تحدد الخاصية العلوية المسافة من الحد العلوي للحاوية إلى الصورة.
تحدد الخاصية اليسرى المسافة من الحد الأيسر للحاوية إلى الصورة.
4. أضفنا أيضا خاصية التعتيم للصورة الثانية لجعلها شبه شفافة.
5. الآن بعد أن تم تعيين الأنماط ، نرى أن الصورة الثانية متراكبة على الصورة الأولى. لضبط موضع الصور ، قد تحتاج إلى تجربة القيم العلوية واليسرى لتحقيق النتيجة المرجوة.
إليك ما تبدو عليه النتيجة النهائية:
في هتمل ، هناك عدة طرق لتراكب صورة واحدة على أخرى باستخدام قناع. القناع هو صورة تحدد الشفافية لصورة أخرى.
فيما يلي بعض الأمثلة على كيفية إنشاء قناع لتراكب الصور في هتمل:
لون الخلفية: رغبا (0 ، 0 ، 0 ، 0);
، حيث تحدد القيمة الأخيرة الشفافية.
صورة الخلفية
وحدد المسار إلى القناع.
باستخدام العفاريت
العفاريت هي صورة واحدة تحتوي على صور متعددة. تعتبر العفاريت ملائمة للاستخدام لإنشاء أقنعة ، حيث يمكنك تراكب جزء من العفريت على جزء آخر والحصول على تأثير تراكب. للقيام بذلك ، استخدم خاصية كس
الخلفية-الموقف
وحدد إحداثيات القناع على العفريت.
- يعتمد اختيار طريقة تراكب الصور على الأهداف ومتطلبات التصميم. غالبا ما يتعين عليك تجربة وتجربة طرق مختلفة للحصول على النتيجة المرجوة.
| إنشاء حاوية لصورتين: |
| } |
تطبيق وضع المزج على الصورة الثانية:
.حاوية إمغ: نث-تشايلد(2) {
أعلى: 0;
قم بتشغيل صفحة ويب واستمتع بتأثير تراكب الصور باستخدام وضع المزج.
يوفر وضع المزج العديد من الأشكال المختلفة لمزج الصور ، مثل "الضرب" و "الشاشة" و "التراكب" و "التعتيم" وغيرها الكثير. يمكن تخصيص هذه التأثيرات بشكل أكبر باستخدام إعدادات الشفافية واللون لتحقيق النتيجة المرجوة.
هذا هو مجرد واحدة من العديد من الطرق لتراكب الصور في هتمل باستخدام وضع مزيج. يستخدم هذا النهج على نطاق واسع في تصميم الويب لإنشاء حلول بصرية فريدة ومذهلة.
أمثلة على تركيب الصور في أتش تي أم أل باستخدام طرق مختلفة
هناك عدة طرق لتراكب صورة واحدة على أخرى في هتمل. فيما يلي أمثلة على الطرق المختلفة التي تسمح لك بتحقيق التأثير المطلوب:
استخدام الوضع المطلق أو النسبي:
باستخدام خصائص المغلق
موضع: مطلق;
و
موضع: نسبي;
يمكنك تعيين موقف وحجم الصور وتراكب لهم على رأس كل منهما الآخر.
باستخدام صورة الخلفية:
يمكنك تعيين صورة الخلفية باستخدام خاصية كس