So positionieren Sie mit CSS Text über einem Bild

Lesezeit: 7 Minuten

So positionieren Sie mit CSS Text uber einem Bild
Wern Ancheta

Wie zentriere ich einen Text über einem Bild in CSS?

<div class="image">
    <img src="https://stackoverflow.com/questions/8708945/sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

Ich möchte so etwas wie das folgende machen, aber ich habe Schwierigkeiten, hier ist mein aktuelles CSS

<style>
.image {
   position: relative;
}

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

Geben Sie hier die Bildbeschreibung ein

Wenn ich das Hintergrundbild verwende, erhalte ich keine Ausgabe von html2pdf:

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

Hier ist prints.php:

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

  • ist es möglich, es mit einem Hintergrundbild zu machen?

    – Webfrau

    5. August 2018 um 1:24 Uhr


  • Dadurch wird ein Überlagerungseffekt im Bild erzielt

    – Rayees AC

    20. September 2020 um 9:19 Uhr

1646310727 827 So positionieren Sie mit CSS Text uber einem Bild
xbonez

Wie wäre es mit sowas: http://jsfiddle.net/EgLKV/3/

Es geschieht durch die Verwendung position:absolute und z-index um den Text über dem Bild zu platzieren.

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

  • Sie könnten den Z-Index vermeiden

    – FooBar

    12. März 2014 um 16:22 Uhr

  • @danielad: Es hat gut funktioniert, bis Sie die Antwort bearbeitet haben. Ich habe Ihre Änderungen rückgängig gemacht.

    – xbonez

    25. Februar 2016 um 21:35 Uhr

  • Haah – danke, ich erinnere Sie nur daran, die Dinge in Ordnung zu bringen – es hat gestern nicht funktioniert – sehen Sie sich den Hallo-Welt-Text an

    – Daniel Adenew

    26. Februar 2016 um 5:58 Uhr

  • Wie konntest du den Text in die Mitte des Bildes bekommen? Links 200, unten 200?

    – Maurer H. Hatfield

    14. Juni 2016 um 16:32 Uhr

  • Leider ist dies eine wirklich schlechte Option, wenn Sie möchten, dass Ihre Website modernen, reaktionsschnellen Praktiken folgt, während Sie die Größe des Containers korrigieren (die Antwort stammt aus dem Jahr 2012, ist also verständlicherweise veraltet). Eine viel bessere Lösung finden Sie hier: stackoverflow.com/questions/43333495/text-over-image-responsive

    – Sk446

    15. Juli 2018 um 12:17 Uhr


1646310727 639 So positionieren Sie mit CSS Text uber einem Bild
Geisterecho

Dies ist eine weitere Methode zum Arbeiten mit responsiven Größen. Es hält Ihren Text zentriert und behält seine Position innerhalb seines übergeordneten Elements bei. Wenn Sie es nicht zentriert haben möchten, ist es sogar noch einfacher, arbeiten Sie einfach mit dem absolute Parameter. Denken Sie daran, dass der Hauptcontainer verwendet wird display: inline-block. Es gibt viele andere Möglichkeiten, dies zu tun, je nachdem, woran Sie arbeiten.

Basiert auf Zentrieren des Unbekannten

Funktionierendes Codepen-Beispiel hier

HTML

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

CSS

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

  • Diese Lösung eignet sich hervorragend für Zeiten, in denen Sie keine festgelegte Höhe oder Breite angeben können.

    – Jazmin

    19. Juli 2016 um 11:23 Uhr

Warum nicht einstellen sample.png als Hintergrundbild von text oder h2 CSS-Klasse? Dies wirkt sich so aus, als hätten Sie ein Bild überschrieben.

  • Was ist, wenn das Bild ein semantischer Teil des Dokuments sein muss?

    – Animation

    3. Januar 2012 um 7:04 Uhr

  • @animuson: Ich glaube nicht, dass das hier der Fall ist. :\

    – Harry Freude

    3. Januar 2012 um 7:10 Uhr

  • Ich verwende html2pdf, um daraus ein PDF zu generieren, und wenn ich das Hintergrundbild verwende, bekomme ich nichts.

    – Wern Ancheta

    3. Januar 2012 um 7:16 Uhr

  • @KyokaSuigetsu: Dann sollten Sie den Fragentitel so ändern, dass er enthält, dass Sie html2pdf verwenden.

    – Harry Freude

    3. Januar 2012 um 8:16 Uhr

1646310728 987 So positionieren Sie mit CSS Text uber einem Bild
Kailas

Für ein ansprechendes Design ist es gut, einen Container mit einem relativen Layout und Inhalt (im Container platziert) mit einem festen Layout als zu verwenden.

CSS-Stile:

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

HTML Quelltext:

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

Informationen zum IONIC Grid-Layout, gleichmäßig verteilten Grid-Elementen und den im obigen HTML verwendeten Klassen finden Sie unter – Raster: Gleichmäßig verteilte Spalten. Hoffe es hilft dir weiter… 🙂

Wie Harry Joy betont, stellen Sie das Bild als Hintergrund des Div ein und wenn Sie nur eine Textzeile haben, können Sie die Zeilenhöhe des Textes so einstellen, dass sie der Div-Höhe entspricht, und dies platziert Ihren Text in der Zentrum der div.

Wenn Sie mehr als eine Zeile haben, sollten Sie die Anzeige auf Tabellenzelle und die vertikale Ausrichtung auf Mitte einstellen.

  • Ich verwende html2pdf, um daraus ein PDF zu erstellen. Ich sehe kein Bild, wenn ich ein Hintergrundbild verwende. Bitte sehen Sie sich meine Bearbeitung an.

    – Wern Ancheta

    3. Januar 2012 um 7:13 Uhr

  • Es tut mir leid, ich habe keine Ahnung, was html2pdf ist.

    – Jewgeni Simkin

    3. Januar 2012 um 7:24 Uhr

So positionieren Sie mit CSS Text uber einem Bild
Escherholz

Ab 2017 ist dies reaktionsschneller und hat bei mir funktioniert. Dies dient zum Einfügen von Text nach innen oder oben, wie bei einem Abzeichen. Anstelle der Nummer 8 hatte ich eine Variable, um Daten aus einer Datenbank zu ziehen.

Dieser Code begann oben mit der Antwort von Kailas

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

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

  • Ich verwende html2pdf, um daraus ein PDF zu erstellen. Ich sehe kein Bild, wenn ich ein Hintergrundbild verwende. Bitte sehen Sie sich meine Bearbeitung an.

    – Wern Ancheta

    3. Januar 2012 um 7:13 Uhr

  • Es tut mir leid, ich habe keine Ahnung, was html2pdf ist.

    – Jewgeni Simkin

    3. Januar 2012 um 7:24 Uhr

So positionieren Sie mit CSS Text uber einem Bild
Escherholz

Eine kleine und kurze Möglichkeit, dasselbe zu tun:

.image {
  position: relative;
  margin-bottom: 20px;
  width: 100%;
  height: 300px;
  color: white;
  background: url('https://via.placeholder.com/600') no-repeat;
  background-size: 250px 250px;
}
<div class="image">
  <p>
    <h3>Heading 3</h3>
    <h5>Heading 5</h5>
  </p>
</div>

  • Überschriften haben innerhalb eines Absatzes nichts zu suchen. Es ist ungültiges HTML.

    – Escherholz

    11. Februar um 19:17 Uhr

923400cookie-checkSo positionieren Sie mit CSS Text über einem Bild

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy