transparente farbe möglich?

[san]

Hallo, ich raffs grad nicht, wie das gemacht wurde: im body ein Bild mit Struktur, da drüber ein Block mit Text und so halbtransparentem Hintergrund. wie geht das? Ich frage, weil ich die farbe ändern möchte. Finde keine gif oder so, die diese Transparenz verursachen könnte oder bin ich nur blind? Oder gibt es transparente Farben???

siehe: http://www.serienbaron.de/

[bleicher]

Grüße,
es gibt opacity-eigenschaft, aber da ich keine halbtransparenz sehe, handelt es sich hierbei wohl um ie-alphafilter, was wiederum bedeuten könnte, dass du ie zum surfen nutzt - zugegeben,ie8 ist empfehlenswerter als FF, aber wo bleibt der Stil?
das ist als würdest du statt Jeans ein Jutesack mit 2 löchern nutzen - schützt Beine, aber...
MFG
bleicher

[san]

tag auch.
ich nutze FF
und scroll mal hoch und runter, da is definitiv sowas wie ne transparenz/halbtransparenz!
können png transparent sein?

Grüße,
es gibt opacity-eigenschaft, aber da ich keine halbtransparenz sehe, handelt es sich hierbei wohl um ie-alphafilter, was wiederum bedeuten könnte, dass du ie zum surfen nutzt - zugegeben,ie8 ist empfehlenswerter als FF, aber wo bleibt der Stil?
das ist als würdest du statt Jeans ein Jutesack mit 2 löchern nutzen - schützt Beine, aber...
MFG
bleicher

[bleicher]

Grüße,

können png transparent sein?

ja - auch "halbtransparent" da sie echte Alphakanaltransparenz unterstützen.
(hab ich zB für meine hp verwendet-recht einfache lösung und altie-user sehen halt nur die "grundfarbe")
MFG
bleicher

[Gunnar Bittersmann]

@@bleicher:

nuqneH

können png transparent sein?
ja - auch "halbtransparent" da sie echte Alphakanaltransparenz unterstützen.

Und so wurde es auch auf serienbaron.de gemacht:

div.box1, ol.commentlist li, form#comments { background: transparent url(images/bg-box.png) repeat scroll 0 0 !important }

Zwei Dinge sind anzumerken:

(1) Das Bild sollte nicht 1 × 1 Pixel klein sein, sondern 16 × 16 oder 32 × 32 dürften vernünftige Größen sein. Das ändert an der Dateigröße so gut wie gar nichts, erspart dem Browser aber, das Hintergrundbild so oft zu wiederholen und die Seite wird schneller gerendert.

(2) Für moderne Browser ist für diesen Effekt gar kein Hintergrundbild erforderlich; mit 'background-color' kann man auch die Opazität angeben. [CSS3-COLOR §4.2.2]

Qapla'

[san]

(1) Das Bild sollte nicht 1 × 1 Pixel klein sein, sondern 16 × 16 oder 32 × 32 dürften vernünftige Größen sein. Das ändert an der Dateigröße so gut wie gar nichts, erspart dem Browser aber, das Hintergrundbild so oft zu wiederholen und die Seite wird schneller gerendert.

--heißt das, ich soll das Bild vergrößern? Oder ein neues größeres Bild erstellen? (da wüsste ich allerdings nicht, wie ich die Transparenz (mit Farbe!) einstellen sollte...)

(2) Für moderne Browser ist für diesen Effekt gar kein Hintergrundbild erforderlich; mit 'background-color' kann man auch die Opazität angeben. [CSS3-COLOR §4.2.2]

naja, da ist mir das mit dem Bild sicherer, denn nicht jeder hat einen aktuellen Browser.

Danke für Deine Antwort!

[suit]

--heißt das, ich soll das Bild vergrößern? Oder ein neues größeres Bild erstellen? (da wüsste ich allerdings nicht, wie ich die Transparenz (mit Farbe!) einstellen sollte...)

7F = 127 in einem 8-Bit-Alphakanal einer RGBA-Grafik entspricht 50% Deckkraft. Nachdem du verschweigst, welches Grafikprogramm du verwendest, wird es schwierig dir zu sagen wie das "geht".

naja, da ist mir das mit dem Bild sicherer, denn nicht jeder hat einen aktuellen Browser.

Nicht jeder = kaum einer :D

[suit]

(2) Für moderne Browser ist für diesen Effekt gar kein Hintergrundbild erforderlich; mit 'background-color' kann man auch die Opazität angeben. [CSS3-COLOR §4.2.2]

24 ways hat dieses Jahr einen guten Artikel zu diesem Thema:
Working With RGBA Colour

[Gunnar Bittersmann]

@@suit:

nuqneH

24 ways hat dieses Jahr einen guten Artikel zu diesem Thema:
Working With RGBA Colour

Anmerkung:

“Falling back to a PNG […]

h1 {  
  background: transparent url(black50.png);  
  background: rgba(0, 0, 0, 0.5) none;  
}
~~~”  
  
Das ist auch nicht wirklich gut, da das PNG auch an Browser ausgeliefert wird, die dies gar nicht benötigen. Da könnte (lise: sollte) man noch nachbessern.  
  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)

[suit]

Das ist auch nicht wirklich gut, da das PNG auch an Browser ausgeliefert wird, die dies gar nicht benötigen.

Bist du da sicher - sprich hast du das ausprobiert?

Warum sollte ein vernünftiger Browser das Eigenschaft-Wert-Paar beachten, parsen und die Grafik laden obwohl die Eigenschaft bereits eine Zeile später nicht mehr benötigt wird?

[Gunnar Bittersmann]

@@suit:

nuqneH

Das ist auch nicht wirklich gut, da das PNG auch an Browser ausgeliefert wird, die dies gar nicht benötigen.

Bist du da sicher - sprich hast du das ausprobiert?

Ja. (Firefox 3.5.5)

Warum sollte ein vernünftiger Browser das Eigenschaft-Wert-Paar beachten, parsen und die Grafik laden obwohl die Eigenschaft bereits eine Zeile später nicht mehr benötigt wird?

Gute Frage. Nächste Frage …

Qapla'

[suit]

Bist du da sicher - sprich hast du das ausprobiert?

Ja. (Firefox 3.5.5)

Ich nämlich auch, Opera 10.10 fordert das nicht notwendige Bild nicht an.

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Bist du da sicher - sprich hast du das ausprobiert?

Ja. (Firefox 3.5.5)

Oops, auf einmal bin ich mir nicht mehr sicher.

Qapla'