wie mit html zwei bilder übereinander legen?
ich habe ein bild und will mit html, css oder php eine gif datei mit transparenten pixeln daüber legen, um so effekte zu erzielen, wie mache ich das
4 Antworten
Mit HTML alleine kannst du das nicht realisieren. Mit S/CSS kannst du das übereinanderlegen.
Bsp
div {
position: relative;
img {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.5;
left: 0;
top: 0;
}
}
<div>
<img src="..."/>
<img src="..."/>
</div>
#bild1{
z-index: 1;
}
#bild2{
z-index: 2;
}
Ich würde mir es mit position:absolute; übereinander legen und dann positionieren. Mit opacity 0.5 kann man es dann durchscheinen lassen.
opacity: 0.7;
bspw. css
aber dann liegt es doch nicht übereinender, die gif datei soll ja die volle deckkraft haben, nur duch die transparenten pixel soll das orginalbild durchscheinen
achso, verstehe
und wenn die einfach übereinanderlegst, also in css einfach beide an die gleiche Stelle festlegst.
in css für hinteres bild
z-index:0;
und für vorders Bild
z-index:1;
----
Die transparenten Pixel bleiben ja transparent und da sieht man dann die Teile des hinteren Bildes.
Vllt klappt es so.
ja aber im html code wird es doch dann trotzdem aneinander gedrückt, ist es überhaupt möglich zwei sachen mit html übereinender zu legen?