Jak napisać tekst na obrazku w HTML?

Aby napisać tekst na obrazku w HTML, najczęściej wykorzystuje się połączenie języka HTML i CSS, tak aby tekst był nakładany bezpośrednio na grafikę i dobrze czytelny niezależnie od jej rozmiaru. Taki efekt możesz uzyskać na kilka sposobów – poniżej znajdziesz rozbudowany poradnik opisujący różne techniki oraz praktyczne przykłady ich zastosowania.

Użycie elementu <img> i pozycjonowanie tekstu z CSS

Najprostszym sposobem jest umieszczenie obrazka w znaczniku <img>, a tekstu w dodatkowym elemencie HTML, który następnie pozycjonujesz absolutnie nad obrazkiem za pomocą stylów CSS.

Przykład kodu:

<div style="position: relative; display: inline-block;">
  <img src="przyklad.jpg" alt="Opis obrazka" style="display: block;">
  <span style="
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    background: rgba(0,0,0,0.5);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 24px;
  ">
    Twój tekst na obrazku
  </span>
</div>

Opis działania –

• Kontener <div> – ma ustawione position: relative;, by pozycjonowanie absolutne tekstu było możliwe względem niego;
• Obrazek <img> – stanowi tło;
• Element <span> z tekstem – otrzymuje position: absolute; i stylizację, która sprawia, że tekst jest wyśrodkowany na obrazku;
• Dodatkowo przezroczyste tło (background: rgba(...)) – poprawia czytelność tekstu na różnych tłach.

Nakładanie tekstu na obrazek za pomocą CSS background i ::after

Innym sposobem – szczególnie gdy obrazek jest tłem – jest użycie CSS background i pseudoelementów.

Przykład kodu:

<div class="obrazek-z-tekstem">Przykładowy tekst na obrazku</div>

.obrazek-z-tekstem {
  width: 500px;
  height: 300px;
  background: url('przyklad.jpg') no-repeat center/cover;
  position: relative;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  text-shadow: 1px 2px 8px #000;
}

Opis działania –

• Obrazek staje się tłem elementu – przez background;
• Tekst umieszczony jako bezpośrednia zawartość diva – jest wyśrodkowany za pomocą Flexbox;
• Dodatkowa stylizacja (text-shadow, kolor tekstu) – poprawia czytelność.

Użycie SVG – tekst wektorowy na obrazku rastrowym lub wektorowym

Jeśli zależy Ci na bardzo dużej ostrości oraz zaawansowanych efektach graficznych, możesz skorzystać z SVG i elementu <text>, nakładając tekst bezpośrednio na obraz (np. osadzony jako <image> w SVG).

Przykład kodu SVG:

<svg width="500" height="300" viewBox="0 0 500 300">
  <image href="przyklad.jpg" x="0" y="0" width="500" height="300" />
  <text x="250" y="150" text-anchor="middle" fill="#fff" font-size="36" font-family="Arial" stroke="#000" stroke-width="2">
    Tekst SVG na obrazku
  </text>
</svg>

Opis działania –

• Pierwsza linia <image> – wczytuje plik graficzny jako tło;
• Tag <text> – wyświetla dowolny napis we wskazanej pozycji;
• Możesz stosować dodatkowe efekty – np. obramowanie (stroke i stroke-width).

Praktyczne zastosowania tekstu na obrazku

• Banery reklamowe – napisy typu call-to-action na grafice promocyjnej;
• Slidery – tekst opisowy bezpośrednio na zdjęciu;
• Podpisy pod zdjęciami – np. nazwa autora lub tytuł grafiki;
• Memes – dowcipne teksty na plikach obrazkowych;
• Quote cards – cytaty nakładane na tło graficzne;
• Miniatury wideo – tytuł filmu na podkładzie ilustracyjnym.

Praktyczne porady i dobre praktyki

• Dopasuj kolor tekstu i tła do kontrastu, by był wyraźny na obrazku,
• możesz użyć półprzezroczystych prostokątów tła pod tekstem, aby zwiększyć czytelność (np. background: rgba(0,0,0,0.4)),
• pamiętaj o właściwym alt dla obrazka (gdy używasz <img>), co poprawia dostępność i SEO,
• dla rozbudowanych projektów, np. galerii zdjęć lub sliderów z tekstami, zalecane jest wykonanie stylów CSS w osobnym pliku,
• stosuj responsywność – używaj jednostek względnych (np. em, vh, vw) i elastycznych stylów, by efekt dobrze wyglądał na różnych ekranach.

Powyższe metody możesz swobodnie łączyć i modyfikować, dopasowując do własnych potrzeb oraz projektu strony internetowej. Wybór odpowiedniej techniki zależy od efektu graficznego, jaki chcesz uzyskać, skali projektu oraz preferowanego sposobu zarządzania treścią.