Antworten zum Thema „CSS-Gradient + Hintergrundgrafik“

[dn3d_fanboy]

Servus,
ich habe mal wieder eine Frage zum Thema CSS:
Ist es möglich über einen Background, der per CSS einen Farbverlauf bekommen hat, ein Hintergrundbild zu legen?

Ich habe jetzt schon so einiges durchprobiert, leider klappt da nichts.

Hier mal der CSS-Teil, um den es geht:

nav ul li a:hover, nav ul li a:active, nav ul li a:focus
{color: ‪#‎fff‬;
font-variant: normal;
background: #000000;
background: -moz-linear-gradient(top, #000000 0%, #242424 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#242424));
background: -webkit-linear-gradient(top, #000000 0%,#242424 100%);
background: -o-linear-gradient(top, #000000 0%,#242424 100%);
background: -ms-linear-gradient(top, #000000 0%,#242424 100%);
background: linear-gradient(to bottom, #000000 0%,#242424 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#242424',GradientType=0 );

background: url(images/schere-hover.png) center top no-repeat; /*Das Background-Image, um das es geht */

-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
height: 55px;
line-height: 75px;
border-bottom: solid 3px ‪#‎e34104‬;
text-shadow: 1px 1px 0 #000, 2px 2px 0 #000, 3px 3px 0 #000;
-webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,0.2);
box-shadow: 0 3px 0 0 rgba(0,0,0,0.2);}

Gibt es da eine Lösung und könnte mir da jemand einen Tipp geben?

Besten Dank im Voraus.

 

[ebene11]

So:

background:
url('images/schere-hover.png') no-repeat center top, linear-gradient(to bottom, #000000 0%,#242424 100%);

Das gleiche natürlich noch mit den Vendor-Präfixen.

 

[dn3d_fanboy]

So:

background:
url('images/schere-hover.png') no-repeat center top, linear-gradient(to bottom, #000000 0%,#242424 100%);

Das gleiche natürlich noch mit den Vendor-Präfixen.

Vielen Dank,
das ist die Lösung. Ich habe es anders herum probiert (erst das Gradient, dann das Bild), da funktionierte es nämlich nicht.

 

[Myhar]

In deinem Versuch hast du dir den Gradient mit dem Bild überschrieben, das ist etwas anderes als die von ebene11 gepostete Lösung. Du hättest zwei Hintergrundbilder angeben müssen (wie auch von ebene11 gezeigt)
Das ist etwas anderes als zweimal nur einen Hintergrund zu definieren.

 

[dn3d_fanboy]

In deinem Versuch hast du dir den Gradient mit dem Bild überschrieben, das ist etwas anderes als die von ebene11 gepostete Lösung. Du hättest zwei Hintergrundbilder angeben müssen (wie auch von ebene11 gezeigt)
Das ist etwas anderes als zweimal nur einen Hintergrund zu definieren.

Das dachte ich mir schon, dass ich den Hintergrund überschieben habe. Es funktionierte ja auch nicht, das Bild als zweiten Hintergrund, durch Komma getreent, hinter den Gradient zu schreiben.

 

[ebene11]

Das würde auch andersrum funktionieren, so man durch den Gradient hindurchschauen kann. Das Ganze beruht ja auf nichts anderem, als der Möglichkeit einem Element mehrere Hintergrundbilder zuweisen zu können, also so:

E {
background-image: url(einBild), url(nochEinBild), linear-gradient();
}

Aber Myhar hat Recht, das ist etwas anderes als:

E {
background-image: url(einBild);
background-image: url(nochEinBild);
background-image: linear-gradient();
}

Im zweiten Schnipsel wird lediglich der Gradient zugewiesen, im ersten Schnipsel beide Bilder und der Gradient. Dabei liegen die Bilder in der Reihenfolge ihrer Notation übereinander, das erste ganz oben. Hier also 'einBild' auf 'nochEinBild' auf 'linear-gradient'. Ziehst du den Verlauf an erste Stelle, verdeckt er alle weiteren Bilder (es sei denn, du definierst den Verlauf mit einer Transparenz).
Das ist so, als ob du dein Zimmer mit einer Blümchentapete tapezierst, sie dann deckend streichst und dich wunderst, dass man plötzlich die schönen Blümelein nicht mehr sieht. ;-)

 

[dn3d_fanboy]

Danke nochmal für die Antworten,
es funktioniert ja jetzt wie gewollt.

Allerdings hätte ich noch eine Frage zu den multiplen Background-Images:
- funktionieren die erst ab CSS3 oder schon mit CSS2?
- bzw. gibt es im Fall, dass sie nur mit CSS3 funktionieren Fall-Backs für ältere Browser?

Ich danke wieder schonmal im Voraus.

 

[Myhar]

Ja, die funktionieren erst mit CSS3. Nein, da gibt es keinen Fallback, sonst hätte man sie nicht mit CSS3 einführen müssen, wenn es dir schon gegeben hätte.

 

[ebene11]

Browsersupport: http://caniuse.com/multibackgrounds

Fallback - wenn man es denn als solchen bezeichnen will: nur ein Hintergrundbild oder eine Javascriptlösung (für den IE - welcher wohl der einzig relevante in diesem Fall ist - z.B. http://css3pie.com)