Image in <div> mit Transparenzverlauf überlagern
Hallo,
ich habe folgendes vor: in einem Header möchte ich ein <img> Element mit einem Transparenzverlauf der als linear-gradient background eines <div> Elementes definiert wurde vollständig überlagern. Den grundsätzlichen Aufbau könnt ihr unten ersehen. Das Problem was ich dabei habe: das <div> mit der ID gradient hat leider immer eine Höhe von 0px. Wie kann ich es automatisch die Höhe vom img annehmen lassen? Oder gibt es eine andere Lösung? Ein Hinweis noch: Ich habe eine Lösung gesehen, bei der im Background zunächst per URL das Hintergrundbild definiert wird (steht weiter rechts in der Definitionszeile) und danach dann per linear-gradient der Verlauf drüber gelegt wird (steht weiter links in der background Zeile, die ja von rechts nach links abgearbeitet wird). Diese Lösung kann ich allerdings nicht anwenden, da die img Zeile dynamisch von einem Joomla Modul erzeugt wird (die Bild Datei ändert sich abhängig von der gerade offenen Seite). Ich hoffe, dass mir einer weiter helfen kann. Ich vermute, dass ich wahrscheinlich nur eine Kleinigkeit übersehen habe. Vielleicht gibt es auch einen anderen Weg, der noch simpler ist, den ich aber noch nicht gefunden habe. Hier der HTML Rahmen: HTML-Code:
<div class"row-fluid"> HTML-Code:
.row-fluid { |
1) ein Div darf nicht selbstschließend sein. Es muss also </div> geschlossen werden
2) setz die Verlaufsebene auf position: absolut; positioniere sie top: 0; left: 0; und dann noch height: 100%; width: 100%; Damit liegt diese Ebene über der anderen. (Bitte noch beachten das das Eltern Element position: relative; haben sollte.) |
Hallo
Zitat:
Ich habe erst mal versucht eine Lösung unabhängig a) von der Bildgröße zu erstellen und b) so dass der Verlauf nur das Bild überdeckt und c) unabhängig von deinen Vorgaben zu erstellen. Mir geht es erst mal darum herauszufinden, ob die Lösung überhaupt deinen Vorstellungen entspricht: Code:
<!DOCTYPE html> MrMurphy |
Hallo Thielo und MrMurphy,
vielen Dank zunächst für Eure Antworten, die haben mir sehr weiter geholfen. Ich hatte im Grunde Eure Lösung schon angewandt, aber mir hat die Position Angabe im moduletable Abschnitt jedesmal die Formatierung zerrissen. Da war mein Fehler. Dank Eurer Hilfe sieht meine Implementierung jetzt wie folgt aus und macht das, was sie soll: Der HTML Code: HTML-Code:
<div class"row-fluid"> HTML-Code:
.row-fluid { |
Alle Zeitangaben in WEZ +2. Es ist jetzt 16:18 Uhr. |
Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.
© Dirk H. 2003 - 2023