27

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

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

ここに画像の説明を入力してください

今私は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;

でも、イメージ通りにすることはできません。誰かがそれをチェックできますか？

コード、リソース、チュートリアル、提案は大歓迎です。

4

6 に答える 6

68

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

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

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

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

于 2013-07-27T01:26:41.570 に答える
31

これがあなたのイメージに合うように私が思いつくことができる最高のものです。これは、 Lea Verouによるここの例から適応されています。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の例

于 2012-11-28T16:14:33.477 に答える
9

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

グラフィックデザインスタックエクスチェンジのこのスレッドは、同じ効果のさらに劇的な例を特徴とし、それがなぜより詳細に起こるのかについても説明しています。簡単なデモンストレーションのために、 VolkerSiegelの回答から画像の1つを借りさせてください。

シーメンススター

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

とにかく、スクロール中に点線の背景がちらつくのを防ぐ唯一の方法は、スクロールしないようにすることです。 幸いなことに、そのための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>

内側のスクロールバーでパターンをスクロールすると、パターンがちらつかないことに注意してください。（SOページ全体をスクロールすると、パターンが表示されているパターンに添付され、それに沿ってスクロールするため、ちらつきが発生します。）<iframe>

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

于 2015-08-17T22:24:55.240 に答える
7

これはどう？

.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

于 2018-04-03T17:35:13.423 に答える
0

これは背景サイズが原因であるため、これを試してください。

background-size:2px 2px;
于 2013-12-06T12:08:45.110 に答える
0

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

background: linear-gradient(
    45deg,
    #fff,
    #fff 50%,
    #000 50%,
    #000
);
background-size: 2px 2px;
于 2017-08-15T19:35:37.920 に答える