Bild mit Text überschreiben - wie geht das in HTML?

BoratB · 19. August 2015

Hi zusammen!
Ich habe ein Bild auf einen div-Rahmen gezogen und möchte auf diesem Bild
einen informativen Text platzieren...
...kann eigentlich nicht schwer sein, ich weiß nur nicht, wie.
Hilfe !!!
René.

MrMurphy · 19. August 2015

Hallo,

das wird zum Beispiel hier beschrieben:

http://www.html-seminar.de/auf…sung-css3-farben-hsla.htm

Gruss

MrMurphy

BoratB · 19. August 2015

bin gespannt!
Mr. McMurphy!
Kleines Problem mit dem Rechner.
Bin wieder am frickeln!
Super das Video!
Der Tipp war schon mal klasse !
Dankeschön!

BoratB · 20. August 2015

... und es hat geklappt !!!

Nochmal Danke !

p.s.: Leider funktioniert die Transparenz nicht.
Die Hintergrundfarbe bleibt 100% opak, ungeachtet der eigegebenen Werte.

MrMurphy · 20. August 2015

Hallo,

ich habe das Beispiel grade mal nachgebaut und es funktioniert. Entweder hast du einen Tippfehler oder Angaben an anderer Stelle im CSS, die in die Transparenz reinpfuschen.

Ohne Link zur Seite ist eine konkrete Hilfe nicht möglich.

Gruss

MrMurphy

BoratB · 20. August 2015

Hi Mr. McMurphy!
Ich weiß auch nicht, sieht alles korrekt aus ...
Hier sind meine Quelltexte:

CSS

* {
* {
    margin: 0px;
    }
.whiskey {
    width: 800px;
    height: 450px;
    position: relative;
    }




.whiskey img {
    display: block;
    }




.whiskey span {
    background-color: silver;
    background-color: hsla(0%, 100%, 0.5);
    position: absolute;
    bottom: 0;
    width: 90%;
    line-height: 2em;
    text-align: right;
    padding-left: 15px;
    font-family: Lucida Handwriting;
    font-size: 20px;
    font-weight: bold;
    text-shadow: yellow 1px 1px 0px;
    color: #D06100;
    }

Alles anzeigen

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <title>Hintergrundbild</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />
    <link href="Hintergrundbild.css" type="text/css" rel="stylesheet" />
    <link href="favicon.ico" type="image/x-icon" rel="shortcut icon" />
</head>
<body>
    <div class="whiskey">
        <img src="img/whiskey.jpg" width="800" height="450"/>
        <span>whiskey ist nicht nur lecker, er kreiert eine sp&uuml;rbare Verbindung zu dem Land, in dem dieses wunderbare Getr&auml;nk erdacht wurde</span>
    </div>
</body>
</html>

Alles anzeigen

Kannst Du damit etwas anfangen?
Gruß!

Und dann:
Kann ich eine zweite <span></span> in diesem Block unterbringen, die sich separat steuern lässt?

MrMurphy · 20. August 2015

Hallo

vergleich mal

CSS

background-color: hsla(0%, 100%, 0.5);

mit

CSS

background-color: hsla(0, 0%, 100%, 0.5);

Zitat

Kann ich eine zweite <span></span> in diesem Block unterbringen, die sich separat steuern lässt?

Grundsätzlich ja. Ob das mit dem veralteten XHTML auch geht weiß ich nicht. In HTML5 auf jeden Fall.

Gruss

MrMurphy

BoratB · 20. August 2015

Die fehlende "0," hatte ich schon mal drin, hat aber (warum auch immer) nicht funktioniert.
Jetzt geht's!
Whow!!!
Dankeschön und weiter gutes Gelingen!

Um auf HTML5 zu wechseln:
Reicht es, die DOCTYPE umzuschreiben?

MrMurphy · 20. August 2015

Hallo

Zitat

Um auf HTML5 zu wechseln:
Reicht es, die DOCTYPE umzuschreiben?

Ja mit gaaanz viel nein.

Ganz so einfach ist es natürlich nicht.

Insgesamt sollten beim Umstieg auf HTML5 auch die neuen Elemente wie header, nav, main, footer u.s.w. genutzt werden statt eine div-Wüste zu erzeugen. Bei kleinen Dateien ist das aber nicht so wichtig. Außerdem werden einige Elemente einfacher oder anders notiert.

XHTML ist zum Beispiel bereits 2006 zu Grabe getragen worden. Seitdem wird es nicht mehr weiterentwickelt und die Browser zeigen es nur noch aus Kompatibilitäsgründen an. Das kann aber jederzeit als Altlast gestrichen werden.

Gruss

MrMurphy

Bild mit Text überschreiben - wie geht das in HTML?

Jetzt mitmachen!

Teilen