Gunnar Bittersmann: Background (Gradient mit Transparenz + Muster)

Beitrag lesen

SELF-Forum

Background (Gradient mit Transparenz + Muster)

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@iWorm:

nuqneH

body {

background: url(../img/pattern.jpg) repeat fixed;
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); /* FF3.6+ /
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); / Chrome,Safari4+ /
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); / Chrome10+,Safari5.1+ /
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); / Opera 11.10+ /
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); / IE10+ /
background: linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); / W3C /
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); / IE6-9 */
}

  
Du setzt erst die 'background'=Eigenschaft auf das Hintergrundbild, dann überschreibst du eben diese Eigenschaft mit dem Gradienten, was zur Folge hat, dass alle Browser, die Gradienten beherrschen, das Hintergrundbild nicht anzeigen. So wird das nichts.  
  
Multiple Hintergründe musst du in derselben Zeile (mit Komma getrennt) für die 'background'=Eigenschaft angeben. Und das halt für alle vendor-spezifischen Gradienten, was ich mit „gesamte Angabe“ [meinte](https://forum.selfhtml.org/?t=207439&m=1409601).  
  
Pseudocode:  
background: Hintergrundbild; /\* Fallback für Browser ohne Gradienten \*/  
background: -moz-Gradient, Hintergrundbild;  
background: -ms-Gradient, Hintergrundbild;  
background: -o-Gradient, Hintergrundbild;  
background: -webkit-Gradient, Hintergrundbild;  
background: Gradient, Hintergrundbild; # Mozilla  
  
Und wenn du dich wunderst, warum du so viele Streifen siehst: 'body' ist eben nicht so hoch wie du denkst. Wenn der den Viewport füllen soll, müsstest du das schon angeben. Wie ich damals schon [sagte](http://forum.de.selfhtml.org/archiv/2011/9/t206722/#m1403939), ist es einfacher, das für 'html' zu tun.  
  
Und warum überhaupt Streifen, wenn du einen 'radial-gradient' haben willst?  
  
Qapla'

-- 
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.  
(Mark Twain)
Beitrag melden
–
Informationen zu den Bewertungsregeln