Guten Tag,
wie kann ich folgendes Fenster durchsichtig machen, so dass man bspw. ein Bild als Hintergrund nehmen kann?
Jetzt das HTML-Seminar als
Video-Tutorial
mit über 210 Videos,
Gesamtspielzeit über 24 Stunden
Video-Kurs HTML5+CSS+Webdesign
Guten Tag,
wie kann ich folgendes Fenster durchsichtig machen, so dass man bspw. ein Bild als Hintergrund nehmen kann?
Coole Sache! Du kannst einen transparenten Hintergrund erzeugen, indem Du den Renderer so änderst:
Danke. Nein, leider klappt das nicht. Es soll in folgendes Beispiel integriert werden:
https://tympanus.net/codrops/2…able-dual-view-slideshow/
Daran habe ich mich bereits gestern verbissen.
Wenn es in der Header kommt ist alles rot.
Wenn es in den Body kommt klappt es nur auf einer Seite, nicht gleichzeitig auf mehreren!
Falls es nicht machbar ist, dieses durchsichtig zu machen:
wie kann ich dieses Herz auf allen Oberseiten anzeigen lassen? Es klappt immer nur auf einer. Unter:
Zitatlet canvas = document.getElementById('Hannibal');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let ctx = canvas.getContext('2d');
Zwar kann ich das Canvas beliebig benennen. Aber insgesamt geht nur ein einziges Canvas auf den Seiten der id=slideshow
ZitatWenn es in den Body kommt klappt es nur auf einer Seite, nicht gleichzeitig auf mehreren!
Versuche, das Canvas mit position: fixed; zu fixieren. Dann wird es natürlich nicht mit sliden. Wenn Du das möchtest, musst Du wohl in jeder Unterseite bzw. div.slide ein Canvas einrichten.
Es muss sliden,
Mit jedem canvas habe ich schon versucht.
Ich versuchte mehrfach auf jeder Unterseite ein Canvas einzubauen, doch schaffte ich nur eines. WIe kann ich pro Unterseite ein Canvas einrichten? Ich versuchte es mit let canvas = document.getElementById('Hannibal'); let canvas = document.getElementById('Hannibal2');let canvas = document.getElementById('Hannibal3');
sowie sämtlichen Möglichkeiten im html scipt
Da wird man wohl das Skript ein wenig erweitern müssen, so dass es für mehrere Canvas funktioniert. Wenn ich Zeit habe, werde ich es versuchen.
Vielen Dank vorab
Das war einfacher als ich dachte. Dieses Javascript tut es bei mir:
Und dieses CSS:
Allerdings braucht dies jede Menge Rechenleistung. Wahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist.
ZitatWahrscheinlich ist es angebracht, die Animation zu deaktivieren, wenn der betr. Container nicht sichtbar ist
Erledigt, so sind auch die unteren Teilseiten einbezogen:
PERFEKT. VIELEN VIELEN DANK
Nur eine Frage noch:
Wenn ich in die Seiten darunter sehe, ist auch das Herz zu sehen. Mal oben, mal unten, ganz anders als die Maus.
Es darf nur auf den Hauptseiten zu sehen sein/den oberen Abschnitten(slide)
Ok. Nur klappt leider jetzt der Befehl:
<div class="content" data-content="content-2">
<img src="./Hover Effect Ideas _ Set 2_files/24.jpg" alt="img24">
<h2>Round Table <span>King Arthur's creative team techniques</span></h2>
<p>Passing......</p>
</div>
nicht mehr, bzw. es wird nur "img24"angezeigt,
Das kann ich leider nicht finden. Ist das im originalen HTML oder hast Du es hinzu gefügt?
Selber hinzugefügt. Er nimmt unten keine Bilder an
Kann ich nicht reproduzieren. Wenn ich ein Bild einfüge, wird es auch angezeigt, etwa so:
Doch, das mit King Arthur's Team gibt es zwei Mal, oben und unten. Aber auch unten funktioniert es, wenn ich ein Bild einfüge:
klappt. danke
Soweit nur noch eine Frage:
wie kann ich das Bild der Bildschirmgröße anpassen, wie es bei den slidern ist? Bei <div class="img-wrap> zeigt er es sehr sehr klein an beziehungsweise ändert die Größe nicht mit.
Wenn es direkt in dem Container div.content liegt, so wie Du es in #12 gepostet hast, kannst Du es anpassen, indem Du die Größe in Prozent angibst:
Liegt es in irgend welchen Untercontainern, kannst Du statt dessen Viewport-Units verwenden, z. B.:
width: 30vw;d. h. 30% der Breite des Browserfenstern.
folgendes klappt nicht:
<div class="content" data-content="content-2">
<h2>Round Table <span>King Arthur's creative team techniques</span></h2>
<div[data-content="content-2"]>
<img src="img/1.jpg" alt="img2" />
width: 50%;
height: auto;
}
</div>