CSS - CSS3 pixelate ドット背景

Question

itsme

さらに

ソース非AMP版編集

CSS - CSS3 pixelate ドット背景

添付画像のように背景をピクセル化することは可能でしょうか、あるいはコツがあるのでしょうか？

私は背景画像を使用していますが、ご覧のように拡大縮小ができず、ページスクロール時に点滅してしまいます。

画像はこちら]1です。

vlcekmi3さんのおかげでCSSが使えるようになりました。

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;

しかし、画像のように正確に作ることができません。どなたかチェックしていただけませんか？

どんなコードでも、リソースでも、チュートリアルでも、提案でも、ありがたいです。

Peter Mortensen

編集された質問 17日 8月 2015 в 9:05

プログラミング

css3 background css pixelate

28日 11月 2012 в 2:15

8 ビュー

Onimusha

ソース非AMP版編集

最初の投稿のthirtydot'さんのコメントより。回答として投稿すべきでしたね、お見事です。見落とすところでした。彼のコメントを評価してください :) 私がこれを回答として投稿しているのは、それが私を助けたように、他の人を助けるかもしれないからです。

base64でエンコードされたメッセージの使用。

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

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

58

0

解説 (5)

Dinnu Buddy

ソース非AMP版編集

これはbackground-sizeが原因なので、これを試してみてください。

background-size:2px 2px;

Peter Mortensen

編集した答え 17日 8月 2015 в 9:07

0

解説 (0)

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

あなたのイメージに合うように、私が考え出した最高のものがここにあります。Lea Verou]1の例から引用しました。

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

[jsfiddleの例][2]。