CSS-CSS3ピクセル化ドット背景

Css Css3 Pixelate Dot Background

解決：

最初の投稿の30dotのコメントから。答えとしてそれを投稿するべきだった-ブリリアント。私はほとんどそれを逃しました。 彼のコメントを評価してください:) 私はこれを答えとして投稿しているだけなので、それが私を助けたので他の人を助けるかもしれません。

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

背景画像：url（data：image / png; base64、iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpi2r9 / 38
http://jsfiddle.net/thirtydot/v7T98/3/
  
これがあなたのイメージに合うように私が思いつくことができる最高のものです。これは、Lea Verouによるここの例から適応されています。css3以外のブラウザーのフォールバックは何ですか？
 
 
 
body {background-image：-moz-linear-gradient（45deg、＃666 25％、transparent 25％）、-moz-linear-gradient（-45deg、＃666 25％、transparent 25％）、-moz-linear-勾配（45度、透明75％、＃666 75％）、-moz-linear-gradient（-45度、透明75％、＃666 75％）;背景画像：-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、透明）、color-stop（.75、＃666））、-webkit-gradient（linear、0 0、100％100％、color-stop（.75、transparent）、color-stop（.75、＃666） ）;背景画像：-webkit-linear-gradient（45deg、＃666 25％、transparent 25％）、-webkit-linear-gradient（-45deg、＃666 25％、transparent 25％）、-webkit-linear-gradient（ 45度、透明75％、＃666 75％）、-webkit-linear-gradient（-45度、透明75％、＃666 75％）;背景画像：-o-linear-gradient（45deg、＃666 25％、transparent 25％）、-o-linear-gradient（-45deg、＃666 25％、transparent 25％）、-o-linear-gradient（ 45度、透明75％、＃666 75％）、-o-linear-gradient（-45度、透明75％、＃666 75％）;背景画像：線形グラデーション（45度、＃666 25％、透明25％）、線形グラデーション（-45度、＃666 25％、透明25％）、線形グラデーション（45度、透明75％、＃666 75 ％）、linear-gradient（-45deg、transparent 75％、＃666 75％）; -moz-background-size：2px 2px;背景サイズ：2px 2px; -webkit-background-size：2px 2.1px; / * Webkitの値をオーバーライドします* / background-position：0 0、1px 0、1px -1px、0px 1px; }
jsfiddleの例
  
観察される「ちらつき」はソフトウェアの問題ではなく、ハードウェアの問題です。基本的には、画面上のピクセルがすぐに色を変えることができないという事実が原因です。点線の背景はピクセルの交互の行で構成されているため、下にスクロールするたびに 奇数のピクセル 、画面がパターンの2つのシフトされたコピー間で切り替わる瞬間があり、これはちらつきとして表示されます。
 
グラフィックデザインスタックエクスチェンジのこのスレッドは、同じ効果のさらに劇的な例を特徴とし、それがなぜより詳細に起こるのかについても説明しています。簡単なデモンストレーションのために、VolkerSiegelの回答から画像の1つを借りさせてください。
 
 
 
 
 
ほとんどの画面で、この画像をスクロールすると、顕著な「パルス」効果が表示されることに注意してください。 （また、目の光受容体にも応答遅延と順応効果があるため、見ているだけでも少しちらつくように見える場合があります。）
 
とにかく、スクロール中に点線の背景がちらつくのを防ぐ唯一の方法は、 スクロールしないようにします。 幸い、そのためのCSSプロパティがあります。
 
背景-添付ファイル：修正済み。
それ以外は、他に多くはありません。背景を実際にレンダリングする最良の方法は、ほぼ確実に、単純な2色のPNG画像を使用することです。画像を半透明にすることもできるので、さまざまな色の背景の上に重ねることができます。デモについては、以下のスニペットを参照してください。
 
本体{背景色：白;背景画像：url（data：image / png; base64、iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8 / 9hAAAAGUlEQVQ4y2NgoBJwoJAedcGoC0ZdMOAuAABF0hABJ / 8lyQAAAABJRU5ErkJggg ==）;背景-添付ファイル：修正済み。 }
何とか
何とか
何とか
何とか
何とか
何とか
 
何とか
何とか
何とか
何とか
何とか
何とか
 
何とか
何とか
何とか
何とか
何とか
何とか
 
何とか
何とか
何とか
何とか
何とか
何とか
 
内側のスクロールバーでパターンをスクロールすると、パターンがちらつかないことに注意してください。 （それ NS パターンがに添付されているため、SOページ全体をスクロールするとちらつきます