كيف أضع صورة فوق أخرى في HTML؟

Question

أنا مبتدئ في برمجة Rails، وأحاول عرض العديد من الصور على الصفحة.يجب وضع بعض الصور فوق بعضها البعض.لتبسيط الأمر، لنفترض أنني أريد مربعًا أزرق اللون، به مربع أحمر في الزاوية اليمنى العليا من المربع الأزرق (ولكن ليس ضيقًا في الزاوية).أحاول تجنب التركيب (باستخدام ImageMagick وما شابه) بسبب مشكلات في الأداء.

أريد فقط وضع الصور المتداخلة بالنسبة لبعضها البعض.

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

Answer 1

حسنًا، بعد مرور بعض الوقت، إليك ما وصلت إليه:

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 70px;
}

<div class="parent">
  <img class="image1" src="https://placehold.it/50" />
  <img class="image2" src="https://placehold.it/100" />
</div>

كأبسط حل.إنه:

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

Answer 2

هذه نظرة مجردة على ما قمت به لتعويم صورة فوق أخرى.

img {
  position: absolute;
  top: 25px;
  left: 25px;
}
.imgA1 {
  z-index: 1;
}
.imgB1 {
  z-index: 3;
}

<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">

مصدر

Answer 3

إليك الكود الذي قد يمنحك أفكارًا:

<style>
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt=""">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="">
<div>

JSFiddle

وأظن أن الحل في إسبو قد يكون الأمر غير مريح لأنه يتطلب منك وضع كلتا الصورتين بشكل مطلق.قد ترغب في أن يضع الأول نفسه في التدفق.

عادة، هناك طريقة طبيعية للقيام بذلك وهي CSS.لقد وضعت الموقف:نسبي على عنصر الحاوية، ثم ضع الأطفال بداخله بشكل مطلق.لسوء الحظ، لا يمكنك وضع صورة داخل صورة أخرى.لهذا السبب كنت بحاجة إلى div الحاوية.لاحظ أنني جعلته عائمًا لجعله ملائمًا تلقائيًا لمحتوياته.جعلها تظهر:من المفترض أن يعمل inline-block نظريًا أيضًا، لكن دعم المتصفح ضعيف هناك.

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

Answer 4

إحدى المشكلات التي لاحظتها والتي قد تسبب أخطاء هي أنه في إجابة ريختر، الكود أدناه:

<img src="b.jpg" style="position: absolute; top: 30; left: 70;"/>

يجب أن تتضمن وحدات بكسل داخل النمط على سبيل المثال.

<img src="b.jpg" style="position: absolute; top: 30px; left: 70px;"/>

بخلاف ذلك، كانت الإجابة جيدة.شكرًا.

Answer 5

يمكنك الموقف تماما pseudo elements نسبة إلى العنصر الأصلي.

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

وضع علامة على:

<div class="overlap"></div>

المغلق:

.overlap
{
    width: 100px;
    height: 100px;
    position: relative;
    background-color: blue;
}
.overlap:after
{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 5px;
    left: 5px;
    background-color: red;
}

وهنا أ عرض حي

Answer 6

الطريقة السهلة للقيام بذلك هي استخدام صورة الخلفية ثم وضع <img> في هذا العنصر.

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

Answer 7

النمط المضمن فقط من أجل الوضوح هنا.استخدم ورقة أنماط CSS حقيقية.

<!-- First, your background image is a DIV with a background 
     image style applied, not a IMG tag. -->
<div style="background-image:url(YourBackgroundImage);">
    <!-- Second, create a placeholder div to assist in positioning 
         the other images. This is relative to the background div. -->
    <div style="position: relative; left: 0; top: 0;">
        <!-- Now you can place your IMG tags, and position them relative 
             to the container we just made -->   
        <img src="YourForegroundImage" style="position: relative; top: 0; left: 0;"/>
    </div>
</div>

Answer 8

@buti-oxa:لا أريد أن أكون متحذلقًا، لكن الرمز الخاص بك غير صالح.HTML width و height السمات لا تسمح للوحدات؛من المحتمل أنك تفكر في CSS width: و height: ملكيات.يجب عليك أيضًا تقديم نوع المحتوى (text/css;انظر كود إسبو) مع ملف <style> بطاقة شعار.

<style type="text/css"> 
.containerdiv { float: left; position: relative; } 
.cornerimage { position: absolute; top: 0; right: 0; } 
</style>

<div class="containerdiv">
    <img border="0" src="http://www.gravatar.com/avatar/" alt="" width="100" height="100">
    <img class="cornerimage" border="0" src="http://www.gravatar.com/avatar/" alt="" width="40" height="40">
<div>

مغادرة px; في ال width و height قد تتسبب السمات في تعطل محرك العرض.

Answer 9

قد يكون الوقت متأخرًا بعض الشيء ولكن يمكنك القيام بما يلي:

لغة البرمجة

<!-- html -->
<div class="images-wrapper">
  <img src="images/1" alt="image 1" />
  <img src="images/2" alt="image 2" />
  <img src="images/3" alt="image 3" />
  <img src="images/4" alt="image 4" />
</div>

ساس

// In _extra.scss
$maxImagesNumber: 5;

.images-wrapper {
  img {
    position: absolute;
    padding: 5px;
    border: solid black 1px;
  }

  @for $i from $maxImagesNumber through 1 {
    :nth-child(#{ $i }) {
      z-index: #{ $maxImagesNumber - ($i - 1) };
      left: #{ ($i - 1) * 30 }px;
    }
  }
}