Box über Bild mit Transparenz

[iApple]

Hallo zusammen,

ich habe mir in einem Div-Container ein Bild eingebunden. Nun möchte ich in der Mitte des Bildes eine Box (über dem Bild) einblenden, die so aussehen sollte:

- Farbe = Schwarz
- Transparenz = 60%

Ist dies mit HTML und CSS möglich? Wenn ja wie?

Gruss und Danke schonmal im Vorraus.

 

[MegaAdi]

AW: Box über Bild mit Transparenz

hallo ichApfel =)
die Schlagwörter dafür heisen:
position: absolute
und
opacity: 0.6;

Gruß Adi

 

[Hiobifi]

AW: Box über Bild mit Transparenz

Hi iApple,
ja das ist möglich. Du musst den Farbcode in RGBA angeben. Die Transparenz, wird dann mit der letzten Angabe definiert. Für dich sieht dass dann so aus:
background: rgba(0, 0, 0, 0.6);
Die ersten drei Angaben sind die Farben, also rot, grün und blau. Die letzte Angabe ist die Transparenz in Dezimal. 1=100%; 0.6=60%
Hoffe ich konnte dir helfen
Hiobifi

 

[Hiobifi]

AW: Box über Bild mit Transparenz

hallo ichApfel =)
die Schlagwörter dafür heisen:
position: absolute
und
opacity: 0.6;

Gruß Adi

Ich bin mir nicht sicher, aber man braucht doch von Browser zu Browser etwas andere Angaben mit opacity oder? Und dann wird der komplette Inhalt transparent, inklusive Schrift oder täusch ich mich da?

 

[Amateur_builder]

AW: Box über Bild mit Transparenz

N'abend MegaAdi,
wie mein Vorposter schon meinte, würde ich es auch mal mit position:absolute probieren. Dann kannste mit right: px und left: px den abstand zu den Seiten erreichen. top und bottom gehen auch. Sollte dann allerdings bei dir die Box völlig woanders sein, probiers mal mit position:relativ und wieder die Rand angaben. So müsste es klappen. Etwa so:
(Box1 ist deine Hintergrundbox, Box2 die mit der Transparenz)

<div id="box1" stlye="position:relative; width:100px; height:100px;">
Dein Bild
<div id="box2" stlye="position:absolute; left:5px; top:5px; width:90px; height:90px;">
Deine Transparenz
</div>
</div>

Dieser Code ist nur schnell aus dem Kopf geschrieben, müsste aber so (oder so ähnlich) funktionieren

 

[MegaAdi]

AW: Box über Bild mit Transparenz

also ist mitlerweile Browserübergreifend. Für Windoof musste immernoch mit alpha arbeiten (ist auch in dem rgba enthalten {rot gelb blau alpha}).
Ansonsten ist position: relative wie amateur_builder schon schrieb tatsächlich die schönere variante. =)

Gruß Adrian