HTML - /CSS-gradient-hintergrund auf einem Tisch

Habe ich dieses einfache Navigationsleiste mit einem Farbverlauf im hintergrund.

wie Sie sehen können, es hat einen Farbverlauf im hintergrund. Es ist nichts ausgefallenes, nur ein photoshop-Farbverlauf maskiert durch den Tisch. Ich habe die photoshop version, nur um zu zeigen, dass mein design, und jetzt bin ich Probleme beim Neuerstellen von online. Wie mache ich eine HTML-Tabelle haben diesen Farbverlauf als es hintergrund?

Ich Lesen Sie einige Antworten auf ähnliche Fragen, aber Sie hatte komplexere Antworten, als ich es bin suchen. Ich brauche nicht zu Kacheln, ich will einfach nur, um den hintergrund meiner Tabelle zu diesem Farbverlauf. (gradient generiert auf der Stelle oder ein wiederholtes Bild, keine Präferenz)

Wo das Bild von deinem problem? (es ist auch gar nicht geschrieben, auf die ursprüngliche Frage)
100 rep-Punkte, post-Bild, sry 🙁

InformationsquelleAutor brothman | 2013-05-30

  1. 4

    Ich bin mit einem zufälligen Farbverlauf, weil ich nicht sehen können Ihre gewünschte, aber hier eine schnelle CSS3-Beispiel.

    HTML

    <table>
    <tr>
        <td>Table Data</td>
    </tr>
</table>

    CSS

    table{
    /* set your gradient code here */
    background: rgb(240,183,161);
    background: -moz-linear-gradient(-45deg,  rgba(240,183,161,1) 0%, rgba(140,51,16,1) 50%, rgba(117,34,1,1) 51%, rgba(191,110,78,1) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(240,183,161,1)), color-stop(50%,rgba(140,51,16,1)), color-stop(51%,rgba(117,34,1,1)), color-stop(100%,rgba(191,110,78,1)));
    background: -webkit-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: -o-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: -ms-linear-gradient(-45deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    background: linear-gradient(135deg,  rgba(240,183,161,1) 0%,rgba(140,51,16,1) 50%,rgba(117,34,1,1) 51%,rgba(191,110,78,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b7a1', endColorstr='#bf6e4e',GradientType=1 );

}

    Farbverlauf generiert: http://www.colorzilla.com/gradient-editor/

    Arbeiten Fiddle: http://jsfiddle.net/daCrosby/43ZkH/

    thx für die Antwort. Es warf mich ab, denn aus irgendeinem Grund ist der Farbverlauf im hintergrund nicht zeigen, bis in meine DreamWeaver CS6.. aber wenn ich eine Vorschau der Seite in Safari zeigt es. Anyway, thx nochmal!

    InformationsquelleAutor DACrosby

  2. 0

    Können Sie ein DIV-Element als parent-Tabelle für die Verlaufs-und padding: 0;

    <div style="background: url('gradient.jpg') repeat-x left top">
<table>
<!-- table content here -->
</table>
</div>

    ** Unterstützt in allen Browsern

    InformationsquelleAutor Nikola R.

Schreibe einen Kommentar