nicht angemeldet
transparente Bilder positionieren
MudGuard
JürgenB
Gunnar Bittersmann
Rolf BHallo alle zusammen, für ein Projekt muss ich mehrere Bilder in einer HTML-Seite übereinander legen. Diese Bilder haben jeweils einen transparenten Hintergrund und durch die Überlagerung soll zum Schluss ein ganzes Bild entstehen. Ich habe auch bereits einen Code geschrieben:
<body>
<div>
<img class="Hintergrund" src="Ring1.svg">
<img class="Vordergrund" src="Ring2.svg">
</div>
</body>
.Hintergrund
{
position: absolute;
top:0px;
left:0px;
z-index: 0;
}
.Vordergrund
{
position:absolute;
top:0px;
left:0px;
z-index: 1;
}
Trotzdem werden die Bilder nach wie vor untereinander angezeigt... kann mir da vielleicht jemand weiterhelfen?
Vielen Dank schon mal Tara
-
Hi,
<body> <div> <img class="Hintergrund" src="Ring1.svg"> <img class="Vordergrund" src="Ring2.svg"> </div> </body>.Hintergrund { position: absolute; top:0px; left:0px; z-index: 0; } .Vordergrund { position:absolute; top:0px; left:0px; z-index: 1; }Hm. Das CSS sieht auf den ersten Blick korrekt aus. Wird es richtig eingebunden?
Trotzdem werden die Bilder nach wie vor untereinander angezeigt... kann mir da vielleicht jemand weiterhelfen?
Oder wird die Seite aus dem Cache geladen (und war zuerst ohne CSS-Einbindung)? Dann Ctrl-Shift-R oder Ctrl-F5 im Browser drücken.
cu,
Andreas a/k/a MudGuard-
hi, leider liegt es nicht daran. Das CSS habe ich extra noch einmal geschrieben aber es hat sich leider nix verändert.
-
Hallo,
hi, leider liegt es nicht daran. Das CSS habe ich extra noch einmal geschrieben aber es hat sich leider nix verändert.
dann wäre jetzt ein Link zu deiner (Test-)Seite angebracht.
Gruß
Jürgen-
hallo, das Ganze ist ein Projekt für die Uni und soll nur für den Professor werden, somit ist die Seite nicht online zu finden. Meine Frage ist eigentlich nur, wieso das bei mir nicht funktioniert? Können .svg Dateien nicht übereinander gelegt werden oder muss das Bild eine bestimmte Größe haben oder oder…
-
@@Tara
Meine Frage ist eigentlich nur, wieso das bei mir nicht funktioniert?
Können .svg Dateien nicht übereinander gelegt werden oder muss das Bild eine bestimmte Größe haben
Oh doch. Nein.
oder oder…
Letzteres.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann -
hallo, das Ganze ist ein Projekt für die Uni und soll nur für den Professor werden, somit ist die Seite nicht online zu finden.
Spielwiese:
https://jsfiddle.net/ejj7vmf6/4/
Ergebnis:
Wie Mudgard schon sagte: Der von Dir gezeigte Code funktioniert. Der Fehler liegt an anderer Stelle.
Noch was:
Professor? Studium?
Also wenn ihr nicht bei bittersten Grundlagen seid: Man kann zwei SVG-Grafiken auch direkt zu einer vereinen, Könnte es sein, dass vielmehr das mit der Aufgabe gemeint ist?
-
Hallo Tara,
mittlerweile gelöst?
Wenn nicht: Es wäre hilfreich, die Entwicklerwerkzeuge des Browsers zu öffnen und den Element-Inspektor zu bemühen, um zu prüfen, ob das CSS tatsächlich gegriffen hat. Möglicherweise wurde es gar nicht geladen, weil Du einen Tippfehler beim Einbinden gemacht hast (was Dir der Netzwerk-Inspektor verraten würde).
Abgesehen von dieser Problematik solltest Du deinen absolut positionierten Bildern ein Bezugselement geben. Die Eigenschaften top, left, right und bottom eines absolut positionierten Elements (position:absolute oder fixed) beziehen sich laut auf die entsprechenden Koordinaten des "umschließenden Elements" - aber diese Definition ist nicht ganz selbsterklärend. Das "umschließende Element" ist das nächstobere in in der DOM Hierarchie mit einer position-Angabe, die nicht static ist (d.h. vom Default abweicht). Wird keins gefunden, ist es <body>. D.h. ohne explizites Bezugselement beziehen sich top und Co auf den Rand des Dokuments, und das will man meistens nicht.
Rolf
--
sumpsi - posui - clusi
-
-
-
-