CSS তে কোনও চিত্রের উপরে পাঠ্যকে কীভাবে অবস্থান করবেন


123

সিএসএসে কোনও চিত্রের উপরে আমি কীভাবে একটি পাঠ্যকে কেন্দ্র করব?

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

আমি নীচের মতো কিছু করতে চাই তবে আমার সমস্যা হচ্ছে, আমার বর্তমান সিএসএস

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

এখানে চিত্র বর্ণনা লিখুন

আমি যখন ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করি তখন html2pdf থেকে কোনও আউটপুট পাই না:

<style>
#image_container{
    width: 1000px;
    height: 700px;
    background-image:url('switch.png');
}
</style>
<a href="prints.php">Print</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php 
$_SESSION['sess'] = ob_get_contents(); 
ob_flush();
?>

এখানে প্রিন্ট.এফপি:

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

এটি একটি ব্যাকগ্রাউন্ড ইমেজ দিয়ে তৈরি করা সম্ভব?
ওয়েবউইম

উত্তর:


174

এর মতো কিছু সম্পর্কে: http://jsfiddle.net/EgLKV/3/

এটি ব্যবহার করে position:absoluteএবং z-indexটেক্সটটিকে চিত্রের উপরে রেখে done

#container {
  height: 400px;
  width: 400px;
  position: relative;
}
#image {
  position: absolute;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 150px;
  top: 350px;
}
<div id="container">
  <img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
  <p id="text">
    Hello World!
  </p>
</div>


14
আপনি z-index এড়াতে পারবেন
FooBar

8
@ লাডিয়ালাদ: আপনি উত্তরটি সম্পাদনা না করা অবধি ভাল কাজ করছিল। আমি আপনার সম্পাদনাগুলি ঘুরিয়েছি
xbonez

হাহা - ধন্যবাদ আমাকে আমি আপনাকে ঠিক করার জন্য আপনাকে স্মরণ করিয়ে দিচ্ছি - এটি গতকাল কাজ করছে না - হ্যালো ওয়ার্ল্ড টেক্সটটির
মুখোমুখি

আপনি কিভাবে চিত্রটির মাঝখানে পাঠ্যটি পেতে পারেন? 200 বাম, নীচে 200?
ম্যাসন এইচ। হ্যাটফিল্ড

4
দুর্ভাগ্যক্রমে এইটি সত্যিই খারাপ বিকল্প হিসাবে শেষ হয় যদি আপনি চান যে আপনি আপনার সাইটটি আধুনিক, প্রতিক্রিয়াশীল অনুশীলনগুলি অনুসরণ করুন যেহেতু আপনি ধারকটির আকার নির্ধারণ করছেন (উত্তরটি ছিল 2012 এর তাই এটি বোধগম্য হয়ে গেছে)। অনেক ভালো সমাধান এখানে পাওয়া যেতে পারে: stackoverflow.com/questions/43333495/text-over-image-responsive
Sk446

30

প্রতিক্রিয়াশীল আকারগুলির সাথে কাজ করার জন্য এটি অন্য একটি পদ্ধতি। এটি আপনার পাঠ্যকে কেন্দ্রিক রাখবে এবং এর পিতামাতার মধ্যে এর অবস্থান বজায় রাখবে। আপনি যদি এটি কেন্দ্রিক না চান তবে এটি আরও সহজ, কেবলমাত্র absoluteপরামিতিগুলির সাথে কাজ করুন । মনে রাখবেন মূল ধারকটি ব্যবহার করছে display: inline-block। আপনি কী কাজ করছেন তার উপর নির্ভর করে এটি করার আরও অনেকগুলি উপায় রয়েছে।

অজানা কেন্দ্রিককরণের ভিত্তিতে

কোডিংয়ের উদাহরণ এখানে কাজ করা

এইচটিএমএল

<div class="containerBox">
    <div class="text-box">
        <h4>Your Text is responsive and centered</h4>
    </div>
    <img class="img-responsive" src="http://placehold.it/900x100"/>
</div>

সিএসএস

.containerBox {
    position: relative;
    display: inline-block;
}
.text-box {
    position: absolute;    
    height: 100%;
    text-align: center;    
    width: 100%;
}
.text-box:before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: middle;
}
h4 {
   display: inline-block;
   font-size: 20px; /*or whatever you want*/
   color: #FFF;   
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

6
এই সমাধানটি সেই সময়গুলির জন্য দুর্দান্ত যা আপনি কোনও সেট উচ্চতা বা প্রস্থ নির্দিষ্ট করতে পারবেন না।
ইয়াজমিন

8

কেন সেট না sample.pngপটভূমিতে ইমেজ হিসাবে textবা h2CSS বর্গ? আপনি কোনও চিত্রের উপরে যেমন লিখেছেন এটি কার্যকর করবে।


2
যদি চিত্রটি দস্তাবেজের একটি অর্থপূর্ণ অংশ হওয়া দরকার?
animuson

@ অ্যানিমুসন: আমি মনে করি না যে এখানে এটি ঘটেছে। : \
হ্যারি জয়

আমি এটি থেকে পিডিএফ তৈরি করতে html2pdf ব্যবহার করছি এবং যদি আমি ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করি তবে কিছুই পাই না I
ওয়ার্ন আচেতা

8
@ কিওকাউজিটসু: তারপরে আপনি এইচটিএমএল 2 পিডিএফ ব্যবহার করছেন তা ধারণ করার জন্য আপনার প্রশ্নের শিরোনাম পরিবর্তন করা উচিত।
হ্যারি জয়

6

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

সিএসএস স্টাইল:

/*Centering element in a base container*/

.contianer-relative{ 
  position: relative;
 }

.content-center-text-absolute{ 
  position: absolute; 
  text-align: center;
  width: 100%;
  height: 0%;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 51;
}

এইচটিএমএল কোড:

<!-- Have used ionic classes -->
<div class="row">
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed -->
    </div>
    <div class="col remove-padding contianer-relative"><!-- container with position relative -->
        <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background -->
        <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed -->
    </div>       
</div>

আইওনিক গ্রিড বিন্যাসের জন্য, সমানভাবে ব্যবধানযুক্ত গ্রিড উপাদান এবং উপরের এইচটিএমএলে ব্যবহৃত ক্লাসগুলি, দয়া করে উল্লেখ করুন - গ্রিড: সমানভাবে ব্যবধানযুক্ত কলাম । এটি আপনাকে সাহায্য করে আশা করি... :)


4

হ্যারি জয় যেমন উল্লেখ করেছেন, চিত্রটি ডিভের পটভূমি হিসাবে সেট করুন এবং তারপরে, যদি আপনার কাছে কেবলমাত্র একটি লাইনের পাঠ্য থাকে তবে আপনি পাঠ্যের লাইন-উচ্চতাটি ডিভের উচ্চতার সমান করতে পারেন এবং এটি আপনার পাঠ্যটিকে এতে রেখে দেবে ডিভের কেন্দ্র

আপনার যদি একাধিক লাইন থাকে তবে আপনি প্রদর্শনটি টেবিল-সেল এবং উল্লম্ব-প্রান্তিককরণকে মাঝখানে সেট করতে চাইবেন।


আমি তাদের থেকে একটি পিডিএফ তৈরি করতে html2pdf ব্যবহার করছি। আমি যদি কোনও ব্যাকগ্রাউন্ড-চিত্র ব্যবহার করি তবে কোনও চিত্র দেখি না। আমার সম্পাদনা দেখুন।
ওয়ার্ন আচেতা

আমি দুঃখিত, এইচটিএমএল 2 পিডিএফ কী তা আমার কোনও ধারণা নেই।
ইয়েগজেনি সিমকিন

1

২০১ of সালের হিসাবে এটি আমার পক্ষে আরও প্রতিক্রিয়াশীল এবং কাজ করেছে। এটি কোনও ব্যাজের মতো ভার্সেস ওভার ভিতরে পাঠ্য রাখার জন্য। 8 নম্বর পরিবর্তে, আমার একটি ডাটাবেস থেকে ডেটা টানতে একটি পরিবর্তনশীল ছিল।

এই কোডটি উপরের কৈলাসের উত্তর দিয়ে শুরু হয়েছিল

https://jsfiddle.net/jim54729/memmu2wb/3/

আমার এইচটিএমএল

<div class="containerBox">
  <img class="img-responsive"    src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png">
  <div class='text-box'>
   <p class='dataNumber'> 8 </p>
  </div>
</div>

এবং আমার সিএসএস:

.containerBox {
  position: relative;
  display: inline-block;
}

.text-box {
  position: absolute;
  height: 30%;
  text-align: center;
  width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  font-size: 30px;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: 120px;
  margin: auto;
  padding: auto;
}

.dataNumber {
  margin-top: auto;
}

-1

এটি করার একটি ছোট এবং স্বল্প উপায়

এইচটিএমএল

<div class="image">
     <p>
        <h3>Heading 3</h3>
        <h5>Heading 5</h5>
     </p>
</div>

সিএসএস

.image {
        position: relative;
        margin-bottom: 20px;
        width: 100%;
        height: 300px;
        color: white;
        background: url('../../Images/myImg.jpg') no-repeat;
        background-size: 250px 250px;
    }
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.