Wie Sie verhindern, dass das Hintergrundbild immer unscharf

Ich muss wissen, wie man das hintergrund Bild nicht unscharf werden, wenn der text vorbei ist es in CSS so es verdirbt das Aussehen meiner website, wenn es ist verschwommen.

Mein CSS ist:

background: #ff0000 url(img/rain.jpg) top center repeat-y; 
background-size: 100%;

Aber wenn ich laden Sie es, wo es ist ein text, der Zeile wird verschwommen und ich will nicht, dass es so, wie mache ich das?

Fiddle-Beispiel

Wow. Ich bin erstaunt. Sie konnte so völlig ohne Kontext in dieser Frage. Ohne zu wissen, den Kontext, das ist einfach unbeantwortbar Müll. Bitte fügen Sie den code, screenshot, URL, oder zumindest etwas adequstely, die das problem beschreiben, was zu Ihr führen, und wo Sie stecken... vielleicht wollen Sie auch Lesen Sie die FAQ, könnte es sein, sich gegenseitig vorteilhaft für uns alle.
Mein code ist: background: #ff0000 url(img/rain.jpg) top center repeat-y; background-size: 100%; Aber wenn ich laden Sie es, wo es ist ein text, der Zeile wird verschwommen und ich will nicht, dass es so, wie mache ich das?
setzen Sie den code in Frage, nicht im Kommentar ...und wenn möglich geben Sie uns ein live-Beispiel jsfiddle.net
Ok danke, ich dachte jsfiddle war nur für JavaScript
der code, den Sie eingefügt ist schön. Ist aber leider nicht relevant. Die wichtige Sache wäre, um zu sehen, was ist mit dem Teil Texte, die es gibt. Durch verschwommen meinst du "Holen Sie sich Grau unter dem text"? Könnte es sein, dass du ein div, dessen hintergrund nicht ganz transparent, sondern sagen nur 50%. Man konnte leicht sehen, was Los ist, und werden auch in der Lage, es zu korrigieren Verwendung von tools wie der CSS-tools im Firebug...

InformationsquelleAutor Josh Keighley | 2013-09-07

  1. 25

    Versuchen, hinzufügen:

    image-rendering: -webkit-optimieren-Kontrast;

    Dies sollte die akzeptierte Antwort
    Vereinbart, sollte dies die akzeptierte Antwort.
    Sie sollten es im eingebauten browser mit diesem feature . Warum würde jemand wollen, dass Ihre Bilder unscharf. Duh
    es wird schrecklich Aussehen, wenn Sie skalieren Sie das Bild mit dieser Antwort

    InformationsquelleAutor Kirill A

  2. 5

    Versuchen Sie, diese zu dem code: image-rendering: pixelated; Bei mir funktionierte es perfekt.
    Sie können auch versuchen - image-rendering: -webkit-optimize-contrast;

    InformationsquelleAutor Nurealam Sabbir

  3. 3

    Verwendung von background-size: cover;background-position:50% 50%; wird dir helfen..

    * {
font-family: Calibri, Comic Sans MS, Serif;
background: #ff0000 url(http://www.coolguysite.co.uk/blog/templates/default/img/rain.jpg)   top center repeat-y;
background-size: cover;
background-position:50% 50%;
}

    AKTUALISIERT FIDDLE

    InformationsquelleAutor Ritabrata Gautam

  4. 1

    Habe ich es durch tun:

    background: transparent;

    den h2 und p Elemente.

    Wie funktioniert transparenten hintergrund verhindern, dass das Hintergrundbild immer unscharf ...

    InformationsquelleAutor Josh Keighley

  5. 1

    Hier ist die cross-browser-Technik:

     image-rendering: crisp-edges;
 image-rendering: -moz-crisp-edges;          /* Firefox */
 image-rendering: -o-crisp-edges;            /* Opera */
 image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
 -ms-interpolation-mode: nearest-neighbor;   /* IE (non-standard property) */

    InformationsquelleAutor Ric Flair

Schreibe einen Kommentar