Hinzufügen von Bildern, wenn CSS-Gradienten verwendet werden?

Ich versuche, eine Schaltfläche mithilfe von CSS-Verläufen plus ein Symbol, das über den Verlauf geht, zu erstellen. Ich habe zwei Möglichkeiten ausprobiert und beide waren ein Fehler.Hinzufügen von Bildern, wenn CSS-Gradienten verwendet werden?

Erstens:

.btn { 
    background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)); 
    background: url(../images/btn.png); 
}

ich sollte von wusste, dass nicht von gearbeitet würde! Aber ich habe auch von mehreren Hintergrundbildern von CSS3 gehört, also habe ich es auf diese Weise versucht.

Zweitens:.?

.btn { 
     background: -webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F)), url(../images/btn.png); 
    }

Noch nicht funktioniert :(Gibt es eine Möglichkeit, um dies tatsächlich zu tun mit einem <img>-Tag in den <button>

Quelle

2010-08-24 omnix

BTW, etwas voran -webkit technisch nicht CSS3 ist, sondern ein Apple „Standard“, dass Funktioniert nur in Safari und Chrome. Dies zeigt die anderen Methoden, um einen Gradienten in allen Browsern zu erhalten: http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/ – soutarm

Ja, ich weiß, Ich benutze -moz- ie Filter, aber das war nur ein kurzer Copypasta für das Beispiel ... – omnix

Überprüfen Sie diese Frage, möglicherweise nützlich für Sie: http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – Strelok

nur Webkit-Browser können mehrere Hintergrundeffekte (CSS3) .. im Allgemeinen Sie einen Verlauf OR und Bild haben, aber Sie können nicht beides haben (noch)

könnten Sie 2 divs Overlay tho und das Bild haben für die oberste sein transparent PNG oder so

Quelle

2010-08-24 05:17:35

wie dann in css haben die hintergrund mit einem png und taste mit den verläufen? Funktioniert das? – omnix

ja oder einfach

- css kann sie alle arbeiten .. –

Zugabe sollten Sie Ihr erstes Beispiel verwenden, Vertauschen Sie die Linien jedoch, so dass das Bild vor dem Farbverlauf angewendet wird.Alle Browser erhalten ein Hintergrundbild, aber nur die Browser, die -webkit-gradient verstehen, verwenden den Farbverlauf.Alle anderen ignorieren es.

Quelle

2010-08-24 05:12:57

Ich versuche zu verwenden sowohl Farbverlauf und Bild auf der Schaltfläche. Dies funktioniert nicht .. – omnix

Ah, tut mir leid. Sollte deine Frage genauer gelesen haben. –

Sie können Ihr Symbol auf einen Hintergrund mit Farbverlauf reduzieren, was bedeutet, dass Sie nur das Hintergrundbild festlegen müssen. Abgesehen davon denke ich, dass Sie ein Tag (oder einen Container mit dem Bild als Hintergrund) in Ihren Container mit dem Gradienten einfügen müssen.

Quelle

2010-08-24 05:16:26 soutarm

Ich denke, es wäre besser und kompatibler, wenn Sie nur den Farbverlauf und Schaltfläche zusammen in das gleiche Bild, aber wenn es in Ihrer Situation nicht praktisch ist, können Sie das gleiche erreichen Effekt mit mehreren Divs:

<div style="width:256px; height:256px; background:-webkit-gradient(linear, 0% 0%, 0% 89%, from(#3171CA), to(#15396F));"> 
<div style="width:100%; height:100%; background:url('btn.png') "></div></div>

Stellen Sie sicher, dass Sie die Breite/Höhe-Parameter ändern, die ich einstelle, wenn Sie meine verwenden.

Quelle

2010-08-24 05:28:40 Kranu

Hallo an alle :) Ich habe versucht, die png transparancy Schichtung/css3 Gradiententechnik für eine Weile und quer durch die Browser dieser zuverlässigste zu sein scheint:

background: url (images/bkgd1 .png) oben Mitte repeat-x, url (Bilder/bkgd2.png) oben rechts repeat-x, -moz-linear-gradient (oben, # F3F704 0%, #FFFFFF 100%);
Hintergrund: URL (Bilder/bkgd1.png) oben Mitte repeat-x, URL (Bilder/bkgd2.png) oben rechts repeat-x, -Webkit-Gradient (linear, links oben, links unten, Farbe- stop (0%, # F3F704), Farbstopp (100%, # FFFFFF));

Ich hoffe, das jemand hilft, auch wenn nur eine Person dann werde ich heute den ganzen Tag Smiley sein :)

Quelle

2011-04-22 05:59:30

Hinzufügen von Bildern, wenn CSS-Gradienten verwendet werden?

Antwort

Verwandte Themen