Anzeige

Box über Bild mit Transparenz

Box über Bild mit Transparenz | PSD-Tutorials.de

Erstellt von iApple, 01.03.2011.

  1. iApple

    iApple Nicht mehr ganz neu hier

    Dabei seit:
    30.03.2009
    Beiträge:
    94
    Geschlecht:
    männlich
    Box über Bild mit Transparenz
    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.
     
    #1      
  2. MegaAdi

    MegaAdi Freak

    1
    Dabei seit:
    20.11.2009
    Beiträge:
    610
    Geschlecht:
    männlich
    Ort:
    Görlitz
    Software:
    Rassierwasser vom Lidl :D
    Box über Bild mit Transparenz
    AW: Box über Bild mit Transparenz

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

    Gruß Adi
     
    #2      
  3. Hiobifi

    Hiobifi Noch nicht viel geschrieben

    Dabei seit:
    07.08.2010
    Beiträge:
    22
    Geschlecht:
    männlich
    Software:
    Photoshop CS4, Notepad++, ZenCoding
    Box über Bild mit Transparenz
    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
     
    #3      
  4. Hiobifi

    Hiobifi Noch nicht viel geschrieben

    Dabei seit:
    07.08.2010
    Beiträge:
    22
    Geschlecht:
    männlich
    Software:
    Photoshop CS4, Notepad++, ZenCoding
    Box über Bild mit Transparenz
    AW: Box über Bild mit Transparenz

    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?
     
    #4      
  5. Amateur_builder

    Amateur_builder Verrückter Interessent

    Dabei seit:
    12.10.2008
    Beiträge:
    66
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    Photoshop, Dreamweaver
    Box über Bild mit Transparenz
    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)
    Code (Text):
    1.  
    2. <div id="box1" stlye="position:relative; width:100px; height:100px;">
    3. Dein Bild
    4. <div id="box2" stlye="position:absolute; left:5px; top:5px; width:90px; height:90px;">
    5. Deine Transparenz
    6. </div>
    7. </div>
    8.  
    Dieser Code ist nur schnell aus dem Kopf geschrieben, müsste aber so (oder so ähnlich) funktionieren
     
    #5      
  6. MegaAdi

    MegaAdi Freak

    1
    Dabei seit:
    20.11.2009
    Beiträge:
    610
    Geschlecht:
    männlich
    Ort:
    Görlitz
    Software:
    Rassierwasser vom Lidl :D
    Box über Bild mit Transparenz
    AW: Box über Bild mit Transparenz

    also opacity 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
     
    #6      
Seobility SEO Tool
x
×
×