html tag আমি কিভাবে এইচটিএমএল অন্য একটি ইমেজ একটি অবস্থান অবস্থান করবেন?




কিভাবে html তৈরি করা যায় (8)

@ বাটি-অক্সা: ধৈর্যশীল হতে না, কিন্তু আপনার কোডটি অবৈধ। এইচটিএমএল width এবং height বৈশিষ্ট্য একক জন্য অনুমতি দেয় না; আপনি সম্ভবত সিএসএস width: চিন্তা করছেন width: এবং height: বৈশিষ্ট্য। আপনি <style> ট্যাগ সহ একটি সামগ্রী-টাইপ ( text/css ; এস্পো এর কোড দেখুন) প্রদান করতে হবে।

<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; ছেড়ে যাওয়া px; width এবং height গুণাবলী একটি রেন্ডারিং ইঞ্জিন বাঁক হতে পারে।

আমি একটি পেজে অনেক ছবি দেখানোর চেষ্টা, রেল প্রোগ্রাম প্রোগ্রামিং একটি beginner। কিছু ছবি অন্যদের উপরে রাখা হয়। এটি সহজ করার জন্য বলুন, আমি নীল বর্গক্ষেত্রের উপরের ডান কোণে লাল বর্গক্ষেত্র (কিন্তু কোণে আঁট না) দিয়ে একটি নীল বর্গক্ষেত্র চাই। আমি কর্মক্ষমতা সমস্যা কারণে কম্পোজিটিং (ImageMagick এবং অনুরূপ সঙ্গে) এড়াতে চেষ্টা করছি।

আমি শুধু একে অপরের আপেক্ষিক overlapping ছবি অবস্থান করতে চান।

আরো কঠিন উদাহরণ হিসাবে, একটি বড় ছবির ভিতরে স্থাপিত একটি ওডোমিটার কল্পনা করুন। ছয়টি সংখ্যার জন্য, আমি এক মিলিয়ন বিভিন্ন ছবি সংকলন করতে হবে, অথবা উড়ে উড়ে যাব, যেখানে প্রয়োজন হয় অন্যটি ছয়টি ছবি অন্যের উপরে স্থাপন করা।


এখানে কোড যা আপনাকে ধারনা দিতে পারে:

<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 হয়। আপনি অবস্থান রাখুন: ধারক উপাদান উপর আপেক্ষিক, এবং তারপর একেবারে শিশুদের ভিতরে অবস্থান। দুর্ভাগ্যবশত, আপনি অন্যের মধ্যে একটি ইমেজ রাখতে পারবেন না। কেন আমি কন্টেইনার ডিভ প্রয়োজন। লক্ষ্য করুন যে আমি এটির সামগ্রীতে স্বতঃস্ফূর্ত করতে এটি একটি ভাস্কর্য তৈরি করেছি। এটি প্রদর্শন করা: ইনলাইন-ব্লকটি তাত্ত্বিকভাবেও কাজ করা উচিত, তবে ব্রাউজার সমর্থন সেখানে দরিদ্র।

সম্পাদনা করুন: আমি আমার বিন্দুটিকে আরও ভালোভাবে চিত্রিত করতে চিত্রগুলির আকারের গুণাবলী মুছে ফেলেছি। আপনি যদি কনটেইনার ইমেজটি ডিফল্ট মাপে রাখতে চান এবং আপনি আগে থেকেই আকার জানেন না তবে আপনি পটভূমি কৌশল ব্যবহার করতে পারবেন না। আপনি যদি, এটি যেতে একটি ভাল উপায়।


এক সমস্যা আমি লক্ষ্য করেছি যে ত্রুটি হতে পারে যে rrichter এর উত্তর, নীচের কোড:

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

উদাহরণস্বরূপ শৈলী মধ্যে px ইউনিট অন্তর্ভুক্ত করা উচিত।

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

অন্য যে, উত্তর জরিমানা কাজ করে। ধন্যবাদ।


এটি একটু দেরী হতে পারে কিন্তু এর জন্য আপনি করতে পারেন:

এইচটিএমএল

<!-- 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>

Sass

// 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;
    }
  }
}

আপনি একেবারে তাদের পিতামাতার উপাদান আপেক্ষিক pseudo elements করতে পারেন।

এটি আপনাকে প্রতিটি উপাদানগুলির সাথে খেলার জন্য দুটি অতিরিক্ত স্তর প্রদান করে - তাই একে অপরের উপরে একটি চিত্র অবস্থান করা সহজ হয়ে যায় - সংক্ষিপ্ত এবং অর্থমুগ্ধিক মার্কআপ (কোন খালি ডিভস ইত্যাদি) সহ।

মার্কআপ:

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

CSS:

.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;
}

এখানে একটি লাইভ ডেমো


এটি করার সহজ উপায় হল ব্যাকগ্রাউন্ড-চিত্রটি ব্যবহার করা, তারপর কেবল সেই উপাদানটিতে একটি <img> রাখুন।

করতে অন্য উপায় CSS স্তর ব্যবহার করা হয়। এটির সাহায্যে আপনাকে সাহায্য করার জন্য একটি টন সম্পদ পাওয়া যায়, কেবল 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>

এটি একটি barebones আমি অন্য একটি ইমেজ ভাসা কি করেছি তাকান।

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">

Source





graphics