zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden svg grafik und gradient im hintergrund beisst sich??

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.12.2016, 21:41
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard 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 );

}
vielen Dank f

Geändert von irmen (02.12.2016 um 00:02 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.12.2016, 22:03
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.123
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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));
Unterschiedliche CSS-Angaben werden dann auch kommagetrennt angegeben:

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));
von der Seite

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 22:16 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 02.12.2016, 00:05
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2011
Beiträge: 329
irmen befindet sich auf einem aufstrebenden Ast
Standard

Vielen herzlichen Dank für deine ausführliche und äußerst hilfreiche Antwort!!!!
Danke Danke Danke!
Irmen
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Gradient als Hintergrund mit fixer Höhe mimii CSS 1 27.10.2013 21:13
eine grafik über andere legen keyboardY CSS 6 23.01.2010 18:53
Grafik in ein Template als Hintergrund einbinden. monsun CSS 0 30.06.2008 13:58
Grafik auf Hintergrund -> IE macht Pixelproblem smartens CSS 9 14.06.2007 18:12
Div Orientierung Leonidus CSS 22 30.05.2007 18:05


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:58 Uhr.