HTML Text mit Box transparent zu hintergrund

[MapHD]

Wie kann man einen Text mit Box erstellen wo der text transparent zum Hintergrund ist.
Also so mit Box: https://www.google.at/url?sa=i&source=images&cd=&cad=rja&uact=8&ved=2ahUKEwjq_Pr_i6XeAhWSKVAKHZeICrEQjRx6BAgBEAU&url=https://www.youtube.com/watch?v=UX_aOjw2deo&psig=AOvVaw2qqkx_kut-WJIhwmeEwVuY&ust=1540677142680386

 

[basti1012]

Ich hätte noch nee CSS Lösung zur Auswahl

https://basti1012.bplaced.net/index.php?ordner=html&id=701

läst sich vieleicht noch etwas anpassen aber könnt der sache auch schon nahe

 

[MapHD]

Ich hätte noch nee Css Lösung zur auswahl
https://codepen.io/basti1012/pen/GYeoYj
läst sich vieleicht noch etwas anpassen aber könnt der sache auch schon nahe

wie die Schrift ausgeschnitten ist.
Ich hätte eigentlichgemeint einen Box

 

[MapHD]

Also sollte dann so ausschauen nur mit einem Bild:

 

[basti1012]

soll das Grüne auch durchsichtig sein ,oder soll das da drunter liegene Bild nicht sichtbar sein?

 

[Felixprogram]

Hallo @MapHD ,

wenn du es per Bild haben willst und wie in Post #6 hier ein Tutorial für GIMP :

• Erstelle ein Bild der gewünschten Box-Größe
• Gebe ihm den gewünschten Hintergrund (Mit dem Tool Füllen* - in deinem Beispiel der Grünton)
• Erstelle den Text auf dem Bild in Schriftfarbe weiß
• Gehe bei den Tools auf "Nach Farbe auswählen"* und klicke damit auf einen der Buchstaben
• Gehe auf Ebene* -> Transparenz* -> Farbe nach Alpha* (Falls ausgegraut zuerst Ebene* -> Transparenz* -> Alphakanal hinzufügen*)
• Gehe bei der Farbeinstellung im sich öffnenden Fenster auf weiß (normalerweise Voreinstellung)
• Klicke auf okay
• Exportiere das Bild als PNG

*Bezeichnungen der Funktionen in Version 2.10.6 von GIMP - eventuelle Abweichungen in anderen Versionen
Füge das Bild dann einfach per img-Tag ein

<img src="bild.png"> <!-- Natürlich deinem Speicherpfad und deinen Styleeinstellungen wie z.B. CSS-Klassen anpassen -->

und natürlich nicht vergessen, den Hintergrund umzustellen (in deinem Beispiel <style> body{ background: cyan; } </style> oder ein Farbton ähnlich dazu)
Aber das Einfügen bzw. Einpflegen in deinen eigenen Code wirst du eh alleine schaffen

Grüße,
Felixprogram