01.12.2016, 20:41
|
|||
|
|||
svg grafik und gradient im hintergrund beisst sich??
Hallo ich habe eine svg Grafik und einen Verlauf im Hintergrund. Leider geht immer nur eines von beiden, entweder der Verlauf wird angezeigt oder die svg Grafik.
Kann man die nicht gemeinsam als backgound einsetzen? Oder mache ich einen Fehler? hier das css: Code:
.bg-oben{
background-image:url(../img/netz1.svg);
background-size:cover;
background-repeat:no-repeat;
background: rgba(204,204,204,1);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,1)), color-stop(22%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%, rgba(255,255,255,1) 100%);
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff', GradientType=0 );
}
Geändert von irmen (01.12.2016 um 23:02 Uhr) 
|
| Sponsored Links |
|
01.12.2016, 21:03
|
|||
|
|||
|
Hallo
Das SVG und Linear-Gradient sind beides Hintergrundbilder. background ist eine Kurzschreibweise, die unter anderem die Anweisung für background-image enthält. Mit background-image und background bindest du demnach zwei Hintergrundbilder nacheinander ein, von denen nur das jeweils letzte im Quelltext angegebene auch angezeigt wird. Bei Kurzschreibweisen (es gibt ja noch viele andere) werden häufig die Angaben, die weggelassen werden, durch Browservorgaben ausgefüllt. Das ist so vorgegeben, führt bei Webseitenerstellern aber immer wieder zu Irritationen. Mit CSS3 können mehrere Hintergrundbilder gleichzeitig angegeben werden, ich weiß aber nicht, wie groß aktuell die Browserunterstützung dafür ist. Mozilla nennt folgendes Beispiel für zwei Bilder und einen linear-gradient, die durch Komma getrennt werden: Code:
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); Code:
background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; background: -moz-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -webkit-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), -ms-linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); https://developer.mozilla.org/en-US/...le_backgrounds Zwar nicht schön, funktioniert aber in jedem Fall: Du kannst entweder html und body jeweils ein Hintergrundbild zuweisen. Oder du erstellt innerhalb von body einen Container, der body immer voll ausfüllt, und weist body und dem Container jeweils in Hintergrundbild zu. Gruss MrMurphy Geändert von MrMurphy (01.12.2016 um 21:16 Uhr)
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| CSS Gradient als Hintergrund mit fixer Höhe | mimii | CSS | 1 | 27.10.2013 20:13 |
| eine grafik über andere legen | keyboardY | CSS | 6 | 23.01.2010 17:53 |
| Grafik in ein Template als Hintergrund einbinden. | monsun | CSS | 0 | 30.06.2008 12:58 |
| Grafik auf Hintergrund -> IE macht Pixelproblem | smartens | CSS | 9 | 14.06.2007 17:12 |
| Div Orientierung | Leonidus | CSS | 22 | 30.05.2007 17:05 |
Linear-Darstellung
