CSS hintergrund-Bild erscheinen nicht in Safari

Habe ich die sehr einfache Aufgabe der Anwendung ein Hintergrundbild für ein DIV. Ich kann das Bild mit jedem anderen browser außer Safari. Kann jemand einen Blick auf meine CSS und Website und sagen Sie mir, was ich falsch mache.

CSS:

#intro2services {
    background:linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url(../img/colorpencils.jpg) fixed;
    background-position: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
}

Website:
www.designedbysheldon.com

  • Das Bild mit dem Farbverlauf zeigt sich in Chrome 39", " Safari 8, aber hatte Probleme in Firefox (alle Mac).
InformationsquelleAutor Sheldon Heath | 2015-01-02
  1. 0

    Ich spielte mit Ihrer Website für ein paar Minuten, und ich schlage vor, brechen Sie Ihre Stile für hintergrund und nicht kondensierend einige, während andere zu haben, die erklärt, auf Ihre eigenen. Ändern Sie Ihre CSS:

    #intro2services {
    background-position: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: -moz-linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)),url('../img/colorpencils.jpg'); /* Firefox-specific background styles */
    background-image: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0)), url('../img/colorpencils.jpg');
    background-attachment: fixed;
}

    Dass entfernt das zu wiederholen, angewandt, den Verlauf und angewendet, die cover sizing richtig. Dies ist getestet und funktioniert in Chrome und Safari. Firefox funktioniert nur, wenn die -moz vendor-Präfix Hinzugefügt. Sie können fügen Sie die anderen vendor-Präfixe, um sicher zu sein, aber Farbverläufe umgesetzt werden in den anderen großen Browsern an dieser Stelle.

    InformationsquelleAutor Brian
  2. 0

    Dies ist ein wissen, Problem mit Safari. Die meisten der Zeit, indem ein negativer z-index-auf Ihre Art, das Problem lösen wird.

    z-index:-1:
    InformationsquelleAutor Jean
  3. 0

    Offenbar Safari-oder zumindest einige Versionen davon-verweigert um CSS anzuwenden, um Formularfelder, so dass, wenn Sie haben eine clevere kleine Suchfeld, so wie ich Safari nicht machen irgendwelche CSS angewendet werden. Ich dachte, es war speziell für meinen Einsatz von SVGs und dann dachte ich, es hatte etwas zu tun mit dem kurzen code. Ich war ratlos, bis ich gefunden eine obskure post auf GitHub von einem MarcHaunschild von 2011 über dieses Verhalten. Jedenfalls in dem Fall, dass Sie versuchen, Stil ein Feld wie ein Suchfeld, hier ist der fix.

    Fügen Sie den folgenden, um Ihre CSS:

    input[type="search"] {
  -webkit-appearance: textfield;
}
    InformationsquelleAutor Etherplain
Schreibe einen Kommentar