Text Blocks Over Image

Jemand hat mich kürzlich nach dieser Technik gefragt und meine erste Reaktion war, dass sie wahrscheinlich zu alltäglich sei, um sie als Tutorial zu behandeln. Aber dann dachte ich, dass hier tatsächlich ein paar interessante Dinge passieren und der Stil trendig genug ist, dass die Leute interessiert sein könnten.

Die Idee ist einfach, Text über einem Bild einzublenden, aber als Blöcke, die vom linken Rand abstehen und rund um den variablelängen Text einen gleichmäßigen Abstand haben. Hier ist ein Screenshot-Beispiel

 

Demo ansehen

 

Die Schematik

Das HTML

<div class="image">

      <img src="images/3754004820_91a5c238a0.jpg" alt="" />
      
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>

Das Bild als Hintergrundbild des umgebenden Divs einzufügen, wäre einfacher, aber in diesem Szenario betrachte ich die Bilder als Inhalt und sie gehören somit in das HTML. Wir werden dieses umgebende Div als Container für die absolute Positionierung verwenden.

Das CSS

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}

Dies wird unseren Text schön über das Bild legen, aber es erreicht nicht die transparente schwarze Box, die wir hinter dem Text haben wollen. Dafür können wir nicht denh2verwenden, da dies ein Block-Level-Element ist und wir ein Inline-Element ohne eine spezifische Breite benötigen.

Lassen Sie uns das Innereh2des in einen Span

<h2><span>A Movie in the Park:<br />Kung Fu Panda</span></h2>

einpacken. Verwenden Sie dann diesen Span, um den Text und den Hintergrund zu gestalten.

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

Problem

Wenn ein Inline-Element umbricht, bricht der Block **sofort** nach dem letzten Zeichen der Zeile ab und beginnt **sofort** bündig links in der nächsten Zeile. Abstand hilft uns hier nicht.

Um dies zu lösen, werden wir einige weitere Spans auf beiden Seiten des<br />Elements anwenden, um diesen Abstand zu simulieren.

<h2><span>A Movie in the Park:<span class='spacer'></span><br /><span class='spacer'></span>Kung Fu Panda</span></h2>

Diese neuen Spans werden wir verwenden, um Abstände anzuwenden.

h2 span.spacer {
   padding:0 5px;
}

Semantik korrigieren

An diesem Punkt ist das Design erreicht, aber es gibt eine Menge zusätzlicher HTML-Elemente, die rein aus Designgründen hinzugefügt wurden. Nämlich all diese Spans. jQuery kann hier helfen und uns retten. Entfernen Sie einfach alle Spans aus dem Markup und wenden Sie sie dynamisch wie folgt an

$(function() {
    
    $("h2")
        .wrapInner("<span>")

    $("h2 br")
        .before("<span class='spacer'>")
        .after("<span class='spacer'>");

});