Schrift mit transparentem Hintergrund über die volle Breite des Bildes.

[Fabi21001]

Hallo zusammen,

Ich habe ein kleines Problem. Und zwar möchte ich einen kleinen Text mit transparentem Hintergrund über ein Bild schreiben. Das hat auch geklappt, jedoch weiss ich nicht, wie man den Transparenten "Balken" hinter dem Text über die komplette Breite des Bildes legen kann.

Mein bisheriger Code:

Css:

      .container {
      position: relative;
      text-align: center;
      color: #000000;
      font-size: 30px;
      }
      .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      }
      #p1 {
        font-size: 40px;
        color: white;
        background-color:rgba(85,85,85,0.55);
      }

Html:

    <div class="container">
        <img src="kabel.jpg" alt="Kabel" style="width: 100%">
      <div class="centered"><p id="p1">Kabel</p></div>
    </div>

[Rolf B]

Hallo Fabi21001,

Ich habe ein kleines Problem

Böse Zungen würden sagen: Du hast ein großes Problem. Du hast Dich an Selfhtml gewendet und präsentierst ein HTML mit DIV-Suppe. Uiuiui, wie kannst Du nur. Nun wird Dich jeder verbessern wollen. Ich auch.

Nein, Spaß. Erstmal nur kompakt das, was Du wissen möchtest:

Dein .centered Element ist genau das: horizontal und vertikal zentriert. Nach deiner Beschreibung willst Du es auch wirklich vertikal zentrieren, aber horizontal über die ganze Breite gehen lassen und nur den Textinhalt zentrieren.

Dafür musst Du das ".centered" Element auf left:0 und width:100% setzen, und die horizontale Transformation unterlassen (ersten Parameter von translate() auf 0 setzen). Das p Element ist nicht nötig; Farbe und Fontsize kannst Du auch auf dem .centered div setzen und den Text darin mit text-align zentrieren. Die Ränder des p Elements kannst Du durch padding-top und padding-bottom des .centered Elements ersetzen. Bei mir in Chrome ist das 1em, also 40px bei font-size:40px. Finde ich sehr reichlich, 0.5em sollte reichen.

Nun die self-typischen Verbesserungstipps. Nimm sie oder kloppe sie in die Tonne.

Abmessungen aller Art gibt man nach aller Möglichkeit nicht fix in Pixeln an, sondern relativ. Je nach den Umständen relativ zum Font des Elements (in Prozent oder in em) oder relativ zum Font des Root-Elements vom Dokument (in rem). Die Default-Fontsize vieler Browser ist 16px. Das ist aber nicht in Stein gehauen, sondern dient jetzt nur als Grundlage der Umrechnung. Dein Container hat font-size: 30px. Mit 1.9rem oder 2rem wärest Du also recht gut bedient. Deine Bildbeschriftung hat 40px. Die solltest Du relativ zum Container wählen, das wären bei 2rem im Container 125% für die Beschriftung. Damit kommst Du - sofern der User nicht eingreift - bei den gleichen Werten wie vorher heraus. Aber wenn ein User die Größe der Textdarstellung im Browser verändert, dann skalieren deine Schriften nun mit. Wenn Du sie in px angibst, tun sie es nicht.

Zweitens möchte ich Dir vorschlagen, dein Markup semantischer zu gestalten. Es gibt für solche Zwecke die Elemente figure und figcaption. Ein Klassenname sollte auch nicht ein Layout beschreiben, sondern darstellen, welche Art von Inhalt in den Elementen mit dieser Klasse ist. Im Stylesheet formulierst Du dann, welche Inhalte wie aussehen sollen. Dass die Überschrift in einer Illustration zentriert sein soll, ist eine Info, die nicht ins HTML gehört. Darum ist der Klassenname "centered" falsch. Die figcaption braucht aber auch keine Klasse - wenn du die Caption in einer figure zentrieren willst, kannst Du sie mit passenden CSS Selektoren auch ohne Klasse ansprechen. Schau mal hier, was Kombinatoren sind.

Ich kenne deine Seite nicht und kann daher erstmal nur den generischen Klassennamen "illustration" vorschlagen. Wenn Du alle <figure> Elemente innerhalb der Seite (oder innerhalb eines Teils der Seite) gleich gestalten willst, kannst Du auf die Klasse auch ganz verzichten. Das kommt ganz auf deine Inhalte an. Ich bleibe erstmal bei class="illustration".

<figure class="illustration">
   <img src="kabel.jpg" alt="Kabel">
   <figCaption>Kabel</figCaption>
</figure>

Das width-Attribut am <img> Element verlege ich ins CSS, und ein p in der Caption ist unnötig.

.illustration {
  position: relative;
  font-size: 2rem;
  margin: 0;                /* figure bringt margin mit */
}
.illustration img {
  width: 100%;               /* Bild soll die Illu ausfüllen */
}
.illustration figCaption {
  position: absolute;
  top: 50%; left: 0%; width:100%;
  transform: translate(0%, -50%);
  background-color: rgba(85,85,85,0.55);
  font-size: 125%;
  color: white;
  text-align: center;
}

Statt absolut zu positionieren, kann man auch Grid-Layout verwenden (Infos dazu im Self-Wiki). Das unterteilt einen Container in ein Raster, und man kann jedes Kind frei in Rasterzellen positionieren. Und man kann angeben, ob der Inhalt oben, unten oder in der Mitte landen soll. Mit einem ein-mal-ein Grid sähe es so aus:

.illustration {
  margin: 0;
  font-size: 2rem;
  display: grid;
  grid-template: "illu" auto  /* Eine Zelle, Höhe auto */
                / 1fr;        /* und volle Breite */
  align-items: center;        /* Zellinhalt vertikal zentrieren */
}
.illustration img {
  grid-area: illu;             /* Bild in die "illu" Zelle */
  width: 100%;
}
.illustration figCaption {
  grid-area: illu;            /* Caption auch in die "illu" Zelle */
  background-color: rgba(85,85,85,0.55);
  padding: 0.5em 0;
  font-size: 125%;
  color: white;
  text-align: center;
}

Die "auto" Höhenangabe für die "illu" Zelle sorgt dafür, dass die Höhe der Abbildung durch die Abmessungen des Bildes bestimmt wird. Vorsicht bei Hochkantbildern, das könnte dann riesig werden.

Rolf

[Fabi21001]

Hallo Rolf,

Du hast Dich an Selfhtml gewendet und präsentierst ein HTML mit DIV-Suppe. Uiuiui, wie kannst Du nur.

Ja, daran versuche ich mal zu arbeiten, bin noch sehr neu und unvertraut mit HTML.

Vielen Dank für deine schnelle Antwort. Die erste Variante hat so geklappt, wie ich es mir vorgestellt habe.

Nun die self-typischen Verbesserungstipps.

Ebenfalls noch vielen Dank für diese Tipps. Ich werde versuchen diese beim nächsten Mal umzusetzen😀.

MfG

Fabi

[Gunnar Bittersmann]

@@Fabi21001

Vielen Dank für deine schnelle Antwort. Die erste Variante hat so geklappt, wie ich es mir vorgestellt habe.

Sie klappt nicht (immer) so, wie du dir das vorgestellt hast.

Wie gerade gesagt haut’s dir die absolute Positionierung um die Ohren: der Text überdeckt möglicherweise nicht nur das Bild, sondern auch andere Seiteninhalte. Das willst du vermeiden.

Nun die self-typischen Verbesserungstipps.

Ebenfalls noch vielen Dank für diese Tipps. Ich werde versuchen diese beim nächsten Mal umzusetzen😀.

Schon dieses Mal!

Ich hab Rolf schon gerölfelt gerüffelt, dass er nicht die angebrachten deutlichen Worte gefunden hat.

😷 LLAP

[Rolf B]

Hallo Gunnar,

Ich hab Rolf schon gerölfelt

Das Wort, das Du suchst, heißt „zergunnart“. Oder verbittert? Hm... 😉

dass er nicht die angebrachten deutlichen Worte gefunden hat.

Dass ich da kompromissbereiter bin als Du, weißt Du ja.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Dafür musst Du das ".centered" Element auf left:0 und width:100% setzen

Nö, musst du nicht, solltest du nicht.

Nun die self-typischen Verbesserungstipps. Nimm sie oder kloppe sie in die Tonne.

Nein, das solltest du nicht.

Was du in die Tonne kloppen solltest: die absolute Positionierung. Die funktioniert spätestens dann nicht, wenn der Text höher ist als das Bild.

Statt absolut zu positionieren, kann man auch Grid-Layout verwenden

Nicht „kann man“, sondern „sollte man“.

Zweitens möchte ich Dir vorschlagen, dein Markup semantischer zu gestalten. Es gibt für solche Zwecke die Elemente figure und figcaption.

Das könnte aber auch ein Aufmacherbild und Überschrift sein; dann header und h1.

<figure class="illustration">
   <img src="kabel.jpg" alt="Kabel">
   <figCaption>Kabel</figCaption>
</figure>

Der Alternativtext macht keinen Sinn; ein Screenreader soll da nicht „Kabel Kabel“ vorlesen. alt="" ist in dem Fall richtig. (Das alt-Attribut muss aber vorhanden sein.)

Die Verbindung von Bild und Text kann man mit ID und ARIA herstellen:

<figure class="illustration">
   <img src="kabel.jpg" alt="" aria-labelledby="fig1-caption">
   <figCaption id="fig1-caption">Kabel</figCaption>
</figure>

---

.illustration {
  display: grid;
  grid-template: "illu" auto  /* Eine Zelle, Höhe auto */
                / 1fr;        /* und volle Breite */
  align-items: center;        /* Zellinhalt vertikal zentrieren */
}

Nice, so geht’s auch. ☞ Da steht ein Pferd zentriert.

Ich hatte da ein paar Linien mehr gezogen, die man beim vertikalen Zentrieren gar nicht braucht. Dann ließe sich aber der Text auch einfach im goldenen Schnitt plazieren.

Die "auto" Höhenangabe für die "illu" Zelle sorgt dafür, dass die Höhe der Abbildung durch die Abmessungen des Bildes bestimmt wird. Vorsicht bei Hochkantbildern, das könnte dann riesig werden.

Man könnte die Bildhöhe auf 100vh begrenzen. Dann füllt es u.U. aber nicht mehr die Breite aus.

😷 LLAP

[Rolf B]

Hallo Gunnar,

absolute Positionierung (...) funktioniert spätestens dann nicht, wenn der Text höher ist als das Bild.

Das hatte ich ausgeklammert, das hat der Seitenautor ja zumeist selbst in der Hand. Und ich mag dem Kunden gern die Option geben, einfache Tipps einzubauen oder den zumeist radikalen Self-Umbau anzugehen. Auch wenn das Ergebnis im ersten Fall state-of-the-shlock statt state-of-the-art sein mag.

Nice, so geht’s auch.

Ein Lob von Gunnar?!?!?! 😊

Da steht ein Pferd zentriert.

Sollte der Text darin nicht „Da steht ein Pferd auf der Flur“ lauten? 😉 So, nu wieder ab ans Rechenpapier mit Dir, die Dreiecke warten!

Rolf

[Fabi21001]

@@Gunnar Bittersmann

Erstmal auch ein riesen Dankeschön für die Hilfe.😀

`<figure class="illustration">
   <img src="kabel.jpg" alt="" aria-labelledby="fig1-caption">
   <figCaption id="fig1-caption">Kabel</figCaption>
</figure>`

Doch eine Frage noch: Was macht das mit dem "aria" genau für einen Unterschied?😅

MFG

Fabi

[Rolf B]

Hallo Fabi21001,

ARIA (Accessible Rich Internet Applications) ist eine Ergänzung zu HTML, die sich mit Assistenztechniken ("Bedienbarkeit", "Accessibility") befasst. Wie z.B. Tools, die Webseiten vorlesen.

Ein Einstieg: https://wiki.selfhtml.org/wiki/WAI-ARIA

Viele Zusammenhänge auf deiner Seite kann ein Assistenztool automatisch erkennen, vor allem dann, wenn Du die HTML Elemente gemäß ihres Bestimmungszwecks verwendest, aber eben nicht alles.

Ein Teil von ARIA besteht aus Rollen, die HTML Elemente spielen. Dazu dient das role-Attribut am Element. Es gibt eine ganze Menge ARIA Rollen, und viele davon werden von den "richtigen" HTML Elementen per Default gesetzt. Aber wenn Du selbst was baust, was über Standard-HTML hinausgeht, musst Du auch mal selbst eine Rolle zuordnen.

Darüber hinaus gibt's eine Menge aria-Attribute die Zusatzinfos für Screenreader bereitstellen. Wie z.B. implizite Verknüpfungen zwischen Elementen. Normalerweise liest ein Screenreader das alt-Attribut vor. Hier soll er statt dessen die figcaption verwenden. Ein ARIA-Analphabeten wie ich übersieht sowas gerne, deswegen hat Gunnar das hinzugefügt.

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Die Verbindung von Bild und Text kann man mit ID und ARIA herstellen:

<figure class="illustration">
   <img src="kabel.jpg" alt="" aria-labelledby="fig1-caption">
   <figCaption id="fig1-caption">Kabel</figCaption>
</figure>

Keine so gute Idee. Dann liest ein Screenreader zweimal „Kabel“ vor.^[1]

„Nicht machen! Hier braucht man kein ARIA“, sagt Eric Eggert.

😷 LLAP

---

1. Erinnert mich an:
   „Sag man zwanzig mal ‚Kabel‘!“
   „??“
   „Mach schon!“
   „Kabel Kabel Kabel Kabel Kabel Kabel Kabel …“
   „Womit isst du deine Suppe?“ ↩︎