Wie man erstellt: Bild mit transparentem Text

Lernen Sie, wie man mit CSS Bildtexte mit transparentem (halbtransparentem) Hintergrund erstellt.

Transparenter Bildtext

Norway
Überschrift

Lorem ipsum dolor sit amet, an his etiam torquatos. Tollit soleat phaedrum te duo, eum cu recteque expetendis neglegentur. Cu mentitum maiestatis persequeris pro, pri ponderum tractatos ei.

Try it yourself

Wie man transparente Bildtexte erstellt

Erster Schritt - HTML hinzufügen:

<div class="container">
  <img src="notebook.jpg" alt="Notebook" style="width:100%;">
  <div class="content">
    <h1>Überschrift</h1>
    <p>Lorem ipsum..</p>
  </div>
</div>

Zweiter Schritt - CSS hinzufügen:

.container {
  position: relative;
  max-width: 800px; /* 最大宽度 */
  margin: 0 auto; /* 将其居中 */
}
.container .content {
  position: absolute; /* 定位背景文本 */
  bottom: 0; /* 在底部。使用top:0将其附加到顶部 */
  background: rgb(0, 0, 0); /* 回退颜色 */
  background: rgba(0, 0, 0, 0.5); /* 不透明度为 0.5 的黑色背景 */
  color: #f1f1f1; /* 灰色文本 */
  width: 100%; /* 全宽 */
  padding: 20px; /* Some inner padding */
}

Try it yourself