Background (Gradient mit Transparenz + Muster)

[iWorm]

Also ich hatte mal folgendes Problem:

Lesen

Mit der transparenten png-Datei hat's bei mir geklappt,
Meine Frage ist: Den Farbverlauf (mit Transparenz) würde ich gerne mit CSS machen.

Dieser Farbverlauf

Also Bild unter einem transparenten Farbverlauf.
Wie kombiniere ich sie im background?
MfG iWorm

[Gunnar Bittersmann]

@@iWorm:

nuqneH

Also Bild unter einem transparenten Farbverlauf.
Wie kombiniere ich sie im background?

Was genau ist dein Problem, den Gradienten (der wie ein Hintergrundbild gehandhabt wird) vor das Bild zu setzen? Dass du die gesamte Angabe mit den ganzen vendorspezifischen Präfixen wiederholen musst, sollte klar sein.

Qapla'

[iWorm]

1.
2.

1. so sollte es aussehen
2. so sieht es aus bei Chrome und FF

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 */  
}

[Gunnar Bittersmann]

@@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)

[iWorm]

Jetzt hat bei mir 'Klick!' gemacht :D
Danke

Für mich als Einsteiger ist immer noch nicht ganz klar: Wofür die Browser-spezifischen Angaben? Reicht da nicht die letzte Angabe?

PS: Es sollten eig. 2 überlappende Verläufe sein, im Endeffekt kommt aber der radial-gradient raus, hast recht.

[Gunnar Bittersmann]

@@iWorm:

nuqneH

Für mich als Einsteiger ist immer noch nicht ganz klar: Wofür die Browser-spezifischen Angaben? Reicht da nicht die letzte Angabe?

http://www.alistapart.com/articles/prefix-or-posthack/

PS: Es sollten eig. 2 überlappende Verläufe sein, im Endeffekt kommt aber der radial-gradient raus, hast recht.

Dann nimm einen radialen. Gradienten und Transparenzen kosten etliches an Rechenzeit.

Qapla'