Header gestalten
bearbeitet von Rolf BHallo Bernd,
Das Abdunkeln klingt mal wieder nach einem A/B Problem: Willst Du wirklich das Bild dunkler haben, oder geht es Dir um eine bessere Lesbarkeit deiner weißen Schrift? Für die Lesbarkeit könntest Du bei .container noch `text-shadow: 0 0 3px black;` hinzufügen. D.h. jeder Text bekommt einen schwarzen Schatten, der DIREKT dahinter liegt, und mit einem Radius von 3px verschmiert wird. Dadurch bekommt jeder Buchstabe einen leichten grauen Rahmen und ist auf hellem Hintergrund deutlicher zu erkennen.
Um nur das Bild abzudunkeln, kannst Du ein teiltransparentes Overlay zwischen Hintergrund und .container schieben. Dazu musst Du:
- dem .pageheader die Eigenschaft position:relative hinzufügen
- dem .container die Eigenschaften ein position:relative und z-index:2 hinzufügen
- ein Pseudoelement einfügen:
~~~css
.pageheader:before {
content: " ";
display:block; width: 100%; height: 100%;
position:absolute; z-index: 1;
background-color: black; opacity: 0.1;
}
~~~
Statt opacity kannst Du auch einen RGBA-Wert für die Hintergrundfarbe angeben (z.B. mit #00000020 oder rgba(0,0,0,0.1), das wird aber bei Microsoft schlechter unterstützt. Mit anderen Farben als schwarz kannst Du auch Verfärbungen hervorrufen.
Mit CSS filter kommst Du mMn nicht zurecht, das dunkelt gnadenlos alles ab.
_Rolf_
--
sumpsi - posui - clusi