nicht angemeldet
Bild durchscheinen lassen
0 0 0 
Gunnar Bittersmann
Bild durchscheinen lassen
Hallo,
ich bin neu in HTML/CSS Programmierung und würde mich freuen wenn mir jemand weiterhelfen könnte...
Ich habe mit div einen Container definiert der einen Text enthält, welcher mit einer hellblauen Hintergrundfarbe hinterlegt ist. Nun möchte ich noch unter diesen Bereich ein weiteres Hintergrundbild (png Format) legen, dass etwas größer als der Containerbereich sein soll. Im hellblauen Containerbereich soll dieses Bild durchscheinen (Farben sollen sich in diesen Bereich "vermischen" und nicht aufeinander legen). Die Bildbereiche die über diesen Container hinaus gehen sollen das png Bild normal wiedergeben.
Wie macht man so etwas am einfachsten?
Danke ...Volker
-
Solange keine halbtransparenten Hintergründe in CSS unterstüzt werden (was im Moment in den meisten Browsern der Fall sein dürfte), kannst Du diesen Effekt nur erreichen, indem Du in dem hellblauen Bereich die Hintergrundfarbe entfernst und ein zusätzliches div einfügst, welches die Hintergrundfarbe hat und zudem im CSS opacity: 0.5 (Werte von 0-1, Du kannst ja herumprobieren, was Dir gefällt) hat.
Achtung: IE beherrscht kein Opacity. Da muss man mit filter:Alpha(opacity=[0-100]); bzw. -ms-filter für den IE8 ran.
Gruß, LX
--
RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
RFC 1925, Satz 11a: Siehe Regel 6a
-
Hi,
Danke für deine Antwort! Genau so etwas habe ich gesucht.Nur verstehe ich noch leider nicht wie ich den Text und farblichen Hintergrund mit separaten Containern trennen kann (um einen tief schwarzen Text beizubehalten)?
Dieser separate Hintergrundfarb-Container müsste sich irgendwie weiterhin am Textcontainer orientieren und in der Größe je nach Browserfenster anpassen.Gruss Volker
Hier der Code den ich momentan verwende...
<body style="padding-left: 20px; padding-right: 20px; padding-top: 30px; padding-bottom: 30px;
font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: normal;">
.
.
.
/********* Container ***********/
<div id="center_highlight" style="background-color: rgb(241, 210, 255); padding: 5px 10px; opacity: 0.5;">
<p style="font-weight: bold; font-size: larger;">4.5 Praragraph TEXT TEXT</p>
<p style="text-align: left;">
TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT,
TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT,
TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT,
TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT,
TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT, TEXT,
</p></div>
-
@@LX:
nuqneH
Solange keine halbtransparenten Hintergründe in CSS unterstüzt werden (was im Moment in den meisten Browsern der Fall sein dürfte)
?? Wohl kaum!
opacity: 0.5
Nein, das ist nicht, was Volker33 will. Der Text soll ja nicht transparent werden, sondern nur der Hintergrund. Also bitte: 'background-color: rgba()'. [CSS3-COLOR §4.2.2]
Beispiel gefällig?
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Ja, jetzt ist es so wie ich es haben will, zumindest im Mozilla Firefox - was müsste ich tun um es auch im IE so darzustellen?
Weiter stört mich, dass die Text-abschnitte meiner Website im IE und Firefox nicht exakt die gleichen Abstände haben. Mein hinterlegtes 10x10cm Bild erscheint nicht exakt an den gleichen Textpositionen.
Kann ich das Bild anderes "verankern, sodass es an den gleichen Positionen erscheint?<style>body{background-image:url(Bild1.png);
background-repeat:no-repeat;
background-position:center 200px ;
</style>Danke Volker
-
@@Volker33:
nuqneH
Ja, jetzt ist es so wie ich es haben will […]
Was ist „es“?
[…] zumindest im Mozilla Firefox - was müsste ich tun um es auch im IE so darzustellen?
Falling back to a PNG (in: Working With RGBA Colour)
Und du weißt schon, dass es außer Firefox und IE noch andere Browser gibt?
Weiter stört mich, dass die Text-abschnitte meiner Website im IE und Firefox nicht exakt die gleichen Abstände haben.
Warum stört dich das?
Mein hinterlegtes 10x10cm Bild […]
Die Maßeinheit solltest du in Bezug auf Bildschirmausgabe nochmal überdenken. (Mal ganz abgesehen davon, dass es cm² heißen müsste.)
Kann ich das Bild anderes "verankern, sodass es an den gleichen Positionen erscheint?
Du möchtest deinen Text per Bildverarbeitungsprogramm deiner Wahl oder per PHP in deine Grafik einbauen?
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Im Link ist der Effekt den ich erreichen will.
Mit deiner genannten Methode funktioniert es zumindest im Firefox recht gut. Nur sollte dieser Effekt möglichst in vielen unterschiedlichen Browsern erreicht werden und die Darstellung soll gleich sein zumindest soll das Hintergrundbild mit dem farblich hinterlegten Text in verschiedenen Browsern nicht verschoben erscheinen.
Ist das ein komplizierter Effekt?
Gruß Volker
-
-
-
Hi,
bitte: 'background-color: rgba()'. [CSS3-COLOR §4.2.2]
Beispiel gefällig?
Danke für die interessanten Links. Schade dass der IE das DIV komplett transparent darstellt wodurch der Text unleserlich wird. Wie kann man ohne JS Browserweiche dem IE ne normale #000000 Farbe zuweisen?
Danke & LG :)
-
@@anyone:
nuqneH
Wie kann man ohne JS Browserweiche dem IE ne normale #000000 Farbe zuweisen?
Die Frage hatte ich schon beantwortet, bevor du sie gestellt hast.
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
...oder durch doppelte Definition der Hintergrundfarbe
background-color:rgb(250,250,250); background-color:rgba(250,250,250,0.9);
siehe http://yatil.de/Weblog/cross-browser-rgba
:)
-
-
-
-
