web-dev-qa-db-ja.com

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

添付されている画像のように背景をピクセル化することは可能ですか、それともトリックがありますか？

背景画像を使用しますが、ご覧のとおり、拡大縮小されず、ページのスクロール時に点滅します。

Enter image description here

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;

しかし、私はそれをイメージのように正確に作ることはできません。誰かがそれを確認できますか？

すべてのコード、リソース、チュートリアル、および提案を歓迎します。

csscss3backgroundpixelate
21
itsme

これがあなたのイメージにマッチする最高の方法です。ここの例から Lea Vero を採用しています。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;
}

jsfiddleの例

26
James South

最初の投稿のthirtydotのコメントから。回答として投稿するべきでした-華麗。私はほとんどそれを逃しました。 彼のコメントを評価してください：）私はこれを答えとして投稿しているだけなので、他の人の助けになるかもしれません。

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

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

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

58
Onimusha

観察される「ちらつき」は、ソフトウェアの問題ではなく、ハードウェアの問題です。基本的に、画面上のピクセルがすぐに色を変えることができないという事実が原因です。点線の背景は交互のピクセル行で構成されているため、奇数ピクセルでスクロールダウンするたびに、画面がパターンの2つのシフトされたコピー間で切り替わる瞬間があります。これはちらつきとして表示されます。

Graphic Design Stack Exchangeのこのスレッド は、同じ効果のより劇的な例を特徴とし、それがなぜ起こるかをより詳細に説明しています。簡単なデモンストレーションのために、 Volker Siegel's answer から画像の1つを借りさせてください：

Siemens Star

ほとんどの画面で、この画像がスクロールすると顕著な「パルス」効果を示すことに注意してください。 （目の中の視細胞にも反応遅延と順応効果があるため、見ているだけでも少しちらつくように見える場合があります。）

とにかく、スクロール中に点線の背景のちらつきを防ぐ唯一の方法は、スクロールしないようにすることです。幸いなことに、 CSSプロパティがありますそのためだけ ：

background-attachment: fixed;

それ以外は、他にあまりありません。背景を実際にレンダリングする最良の方法は、ほぼ確実に単純な2色のPNG画像を使用することです。画像を半透明にすることもできます。これにより、さまざまな色の背景の上に重ねることができます。デモについては、以下のスニペットを参照してください。

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>

内側のスクロールバーでパターンをスクロールしても、パターンがちらつかないことに注意してください。 （それはdoes全体をスクロールするとちらつきますSOページ。パターンは<iframe>が表示されており、一緒にスクロールします。

（ところで、上記のスニペットで使用したインラインイメージは、実際のパターンがわずか2×2ピクセルであるにもかかわらず、16×16ピクセルです。数回繰り返しても、ファイルサイズの点ではそれほどコストはかかりませんが、古いブラウザで非常に小さな背景画像に問題があることを思い出すようですので、少し安全かもしれません。）

7
Ilmari Karonen

これはどう？

.card {
  background: linear-gradient(90deg, #fff 2px, transparent 1%) center, linear-gradient(#fff 2px, transparent 1%) center, #ccc;
  background-size: 5px 5px;
  
  height: 10em;
  width: 30em;
  position: relative;
}

.text {
  font-size: 2em;  
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="card">
  <div class="text">
    Hello world!
  </div>
</div>

一般に、式は

// color
$bg-color: #fff;
$dot-color: $gray-darker;

// Dimensions
$dot-size: 3px;
$dot-space: 5px;

background: linear-gradient(90deg, $bg-color ($dot-space - $dot-size), transparent 1%) center,
linear-gradient($bg-color ($dot-space - $dot-size), transparent 1%) center, $dot-color;
background-size: $dot-space $dot-space;

見られるように@ https://codepen.io/edmundojr/pen/xOYJGw

3
Matyas

これは、背景サイズのためですので、これを試してください：

background-size:2px 2px;
0
Dinnu Buddy

すべてのブラウザプレフィックスなし：

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