web-dev-qa-db-ja.com

CSSグラデーションチェッカーボードパターン

グラデーションを使用して市松模様を作成したい。例を見つけて自分のニーズに合わせて修正しましたが、-mozプレフィックスでのみ機能します。 -mozプレフィックスを削除すると、パターンはまったく異なります。 comparison of patterns : normal vs. -moz

この-mozチェッカーボードパターンを接頭辞なしlinear-gradientで動作させるにはどうすればよいですか？

body {
  background-image:
  linear-gradient(45deg, #808080 25%, transparent 25%), 
  linear-gradient(-45deg, #808080 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #808080 75%),
  linear-gradient(-45deg, transparent 75%, #808080 75%);

  background-size:20px 20px;    
  background-position:0 0, 10px 0, 10px -10px, 0px 10px;
}
csscss3gradientlinear-gradients
26
Maciej Krawczyk

以下のスニペットのようにbackground-positionを変更して、必要な出力を取得します。これは、Firefox、クローム、オペラ、IE11とエッジで罰金に動作します。

body {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

この問題は、角度が-moz線形勾配と標準勾配によって処理される方法に違いがあるために発生しているようです。 -45deg線形勾配の-mozは、標準勾配の135degと等しいようです（が、角度を変更すると、中央に奇妙なドットが生じます）。

以下のスクリーンショットは違いを示しています（両方とも最新のFirefox v44.0で撮影されています）。

-moz-linear-gradientを使用した出力：

enter image description here

線形勾配の出力：

enter image description here

59
Harry

45degバージョンはうまく機能しますが、異なるズームレベルまたは網膜スクリーンで三角形の間に線が表示される可能性があります。サポートする必要のあるブラウザに応じて、background-blend-mode: difference（ caniuse は現在、ほぼ90％のサポートを示しています）、追加の背景画像を使用してチェックに色を付けることができます。

body {
    background-image: /* tint image */
                      linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)),
                      /* checkered effect */
                      linear-gradient(to right, black 50%, white 50%),
                      linear-gradient(to bottom, black 50%, white 50%);
    background-blend-mode: normal, difference, normal;
    background-size: 2em 2em;
}
13
pmccloghrylaing

これは、しばらくの間透明度のある画像を開いたときのChromeの実装でした（ただし、後で単色の背景を使用するために削除しました）。

element {
    background-position: 0px 0px, 10px 10px;
    background-size: 20px 20px;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}
3
Grant Gryczan

インスピレーションをくれたハリーに感謝します-これを行うためのscss mixinがあります

@mixin checkers($size: 50px, $contrast: 0.07) {
  $checkerColor: rgba(#000, $contrast);
  $angle: 45deg;
  $tp: 25%;

  background-image: linear-gradient($angle, $checkerColor $tp, transparent $tp),
    linear-gradient(-$angle, $checkerColor $tp, transparent $tp),
    linear-gradient($angle, transparent 3 * $tp, $checkerColor 3 * $tp),
    linear-gradient(-$angle, transparent 3 * $tp, $checkerColor 3 * $tp);
  background-size: $size $size;
  background-position: 0 0, 0 $size/2, $size/2 -1 * $size/2, -1 * $size/2 0;
}
0
Stephen