CSS - Latar belakang titik pixelate CSS3

Question

Lebih

Sumber Tidak AMP-versi Sunting

CSS - Latar belakang titik pixelate CSS3

Apakah mungkin atau adakah trik untuk membuat latar belakang berpiksel seperti yang ada pada gambar terlampir?

Saya menggunakan gambar latar belakang, tetapi seperti yang Anda lihat, gambar ini tidak berskala dan berkedip saat menggulir halaman.

Sekarang saya memiliki CSS berkat 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;

Tapi saya tidak dapat membuatnya persis seperti gambar. Dapatkah seseorang memeriksanya?

Kode, sumber daya, tutorial, dan saran apa pun akan sangat dihargai.

Peter Mortensen

Pertanyaan edit 17 Agustus 2015 в 9:05

Pemrograman

css3 background css pixelate

28 November 2012 в 2:15

2 tayangan

Onimusha

Sumber Tidak AMP-versi Sunting

Dari komentar thirtydot di postingan pertama. Seharusnya mempostingnya sebagai jawaban - Brilian. Saya hampir melewatkannya. Silakan beri nilai komentarnya :) Saya hanya memposting ini sebagai jawaban agar dapat membantu orang lain seperti halnya membantu saya.

Menggunakan pesan yang disandikan dengan base64:

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

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

58

0

Komentar (5)

Dinnu Buddy

Sumber Tidak AMP-versi Sunting

Ini karena ukuran latar belakang, jadi cobalah ini:

background-size:2px 2px;

Peter Mortensen

Jawaban edit 17 Agustus 2015 в 9:07

0

Komentar (0)

James South · Accepted Answer · 2012-11-28T16:14:33+00:00

Inilah yang terbaik yang bisa saya berikan untuk mencocokkan gambar Anda. Ini diadaptasi dari contoh di sini oleh Lea Verou Apa yang akan menjadi fallback Anda untuk browser non css3?

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;
}

[contoh jsfiddle][2]