dotted - CSS-CSS3 pixelate Punkthintergrund



css blur background (4)

Aus dem Kommentar von 30thotot im ersten Beitrag. Sollte es als Antwort gepostet haben - Brilliant. Fast hätte ich es vermisst. Bitte bewerte seinen Kommentar :) Ich poste das nur als Antwort, damit es anderen helfen kann, da es mir geholfen hat.

Verwenden einer base64-codierten Nachricht:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9//38gYGAEESAAEGAAasgJOgzOKCoAAAAASUVORK5CYII=);

http://jsfiddle.net/thirtydot/v7T98/3/

https://src-bin.com

Ist es möglich oder gibt es einen Trick, um einen Hintergrund pixelig zu machen wie den im Bild anbei?

Ich benutze ein Hintergrundbild, aber wie Sie sehen können, skaliert es nicht und es blinkt beim Blättern der Seite.

Jetzt habe ich CSS dank vlcekmi3:

background-color: white;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black),
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:100px 100px;
background-position: 0 0, 50px 50px;

Aber ich kann es nicht genau wie das Bild machen. Kann es jemand überprüfen?

Jeder Code, Ressource, Tutorial und Vorschlag wird geschätzt.


Answer #1

Hier ist das Beste, was ich für Ihr Bild finden konnte. Es ist aus dem Beispiel hier von Lea Verou angepasst Was wird Ihr Fallback für Nicht-CSS3-Browser sein?

body {
    background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(45deg, transparent 75%, #666 75%), 
        -moz-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
    background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(45deg, transparent 75%, #666 75%), 
        -webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(45deg, transparent 75%, #666 75%), 
        -o-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: linear-gradient(45deg, #666 25%, transparent 25%), 
        linear-gradient(-45deg, #666 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #666 75%), 
        linear-gradient(-45deg, transparent 75%, #666 75%);
    -moz-background-size: 2px 2px;
    background-size: 2px 2px;
    -webkit-background-size: 2px 2.1px; /* override value for webkit */
    background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}

Beispiel


Answer #2

Das "Flackern", das Sie beobachten, ist kein Softwareproblem, sondern ein Hardware-Problem. Grund dafür ist, dass die Pixel auf Ihrem Bildschirm die Farbe nicht sofort ändern können. Da Ihr gepunkteter Hintergrund aus abwechselnden Reihen von Pixeln besteht, wird jedes Mal, wenn Sie um eine ungerade Anzahl von Pixeln nach unten scrollen, ein kurzer Moment angezeigt, wenn Ihr Bildschirm zwischen zwei verschobenen Kopien des Musters wechselt und dies als Flimmern erscheint.

Dieser Thread in Graphic Design Stack Exchange bietet ein noch dramatischeres Beispiel für den gleichen Effekt und erklärt auch, warum dies genauer geschieht. Nur für eine kurze Demonstration, lasst mich eines der Bilder aus Volker Siegels Antwort ausleihen:

Beachten Sie, dass dieses Bild auf den meisten Bildschirmen beim Scrollen einen wahrnehmbaren "pulsierenden" Effekt zeigt. (Es kann auch sein, dass es ein bisschen flimmert, wenn man es nur anschaut, einfach weil die Photorezeptoren in Ihren Augen auch einige Ansprechverzögerungs- und Anpassungseffekte haben.)

Wie auch immer, der einzige Weg, wie Sie verhindern können, dass Ihr gepunkteter Hintergrund beim Scrollen flimmert, ist das Scrollen nicht. Glücklicherweise gibt es dafür nur eine CSS-Eigenschaft :

background-attachment: fixed;

Ansonsten gibt es nicht viel anderes. Der beste Weg, den Hintergrund tatsächlich zu rendern, ist mit Sicherheit ein einfaches zweifarbiges PNG-Bild. Sie können das Bild sogar halbtransparent machen, sodass Sie es über verschiedene farbige Hintergründe legen können. Sehen Sie sich das folgende Snippet für eine Demonstration an:

body {
  background-color: white;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ/8lyQAAAABJRU5ErkJggg==);
  background-attachment: fixed;
}
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>
<p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p><p>blah</p>

Beachten Sie, dass das Muster nicht flackert, wenn Sie mit der inneren Bildlaufleiste blättern. (Es flackert, wenn Sie die gesamte SO-Seite scrollen, da das Muster an den <iframe> angehängt ist, in dem es angezeigt wird, und wird mitgescrollt.)

(Übrigens, das Inline-Bild, das ich oben im Snippet verwendet habe, ist 16 × 16 Pixel groß, obwohl das tatsächliche Muster nur 2 × 2 Pixel beträgt. Wenn Sie es ein paar Mal wiederholen, kostet es nicht viel in Bezug auf die Dateigröße. und könnte etwas sicherer sein, da ich mich an einige ältere Browser erinnere, die Probleme mit sehr kleinen Hintergrundbildern haben.)


Answer #3

Ohne alle Browserpräfixe:

background: linear-gradient(
    45deg,
    #fff,
    #fff 50%,
    #000 50%,
    #000
);
background-size: 2px 2px;




pixelate