✔ Text in Bild sofort sichtbar

rernanded

rernanded

Erfahrenes Mitglied
Hallo,

mittels einer form lasse ich einen Text in ein Hintergrundbild schreiben, so dass am Ende Text und Hintergrundbild zu einem img verschmelzen.
Bisher ist es so, dass ich erst nach dem submit der form sehen kann wie der Text im Bild aussieht.
Wie kann ich es am besten und einfachsten anstellen, so dass ich vergleichbar einer direkten Vorschau den Text im Hintergrundbild sofort schon beim Schreiben sehe ohne mir per Click erst eine Vorschau des img aufzurufen?
Ich dachte an einen transparentes Texteingabefeld wie ein Layer über dem Hintergrundbild. Ist der Ansatz machbar? Vor allem wenn ich Schriftart, Schriftgrösse und Schriftfarbe auch noch varieren lassen möchte?
MONI
 
Guten Abend Moni,
das ist sicher eine gute Idee und auf jeden Fall machbar. Layer kannst Du sehr gut mit Gridlayout realisieren. Ich habe mal eine Demo gemacht:
Code: 
<!DOCTYPE html>
<html lang="de">

<head>
    <title>Layout Text On Image</title>
    <style>
        div.preview {
            display: inline-grid;
        }

        /* Wir legen das Bild und das Eingabefeld in die selbe
        Zelle des Grid, so dass sie sich überlappen: */
        div.preview>* {
            grid-column: 1/2;
            grid-row: 1/2;
        }

        div.preview>input {
            justify-self: center;
            align-self: center;
            background-color: transparent;
            outline: none;
            border: none;
        }
    </style>
</head>

<body>
    <div class="preview">
        <img src="images/dia0.jpg">
        <input placeholder="Text hier">
    </div>
</body>

</html>
Statt des Eingabefeldes über dem Bild könntest Du es auch beim Formular anordnen und den Text mit Javascript in einen Container über dem Bild übertragen. Javascript wirst Du ohnehin brauchen, um die anderen Eigenschaften der Schrift, Größe, Farbe etc., aus Eingabefeldern auf die Schrift anzuwenden.
 
Danke Dir, ich probier's aus. Die js-Idee kam mir auch bereits, da habe ich ev. sogar noch Code-Schnipsel aus einer anderen Anwendung.
MONI
 
Funktioniert mit inputs. Das passende js habe ich mir eben geschrieben. Aber neues Problem, ich nutze auch textareas. Ich kriege zwar Text aus der textarea-Eingabe in das input im Bild aber nur einzeilig, was auch nicht zu erwarten war. Bevor ich nun viel experimentiere. Klappt Dein Code auch mit textarea?
MONI
 
Bei meiner Schriftgrösse, dem Zeilenabstand usw. sowie der Bildgrösse kann ich einen Vierzeiler unterbringen. Den erstelle ich bisher mit einer textarea. Umbrüche etc. sind dann kein Problem. Auch ohne word-wrap.
Ich könnte nun vier inputs zur Eingabe nutzen und im Bild vier inputs platzieren, aber vllt. geht es einfacher?


MONI
 
Okay, ich probier' es aus. Hatte ich zwar schon und da ging was schief aber war schon ein langer Tag.
Wahrscheinlich komme ich auch erst Morgen dazu. Melde mich wieder, danke Dir erstmal.
MONI
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück