CSS CSS, , ,

CSSバックグラウンドパターンでは、グラデーションファンクションと正確なbackground-sizeおよびbackground-positionを使用してシームレスで繰り返しタイルを作成します。ストライプは交互の色止まりを持つrepeating-linear-gradientを使用します。チェッカーボードは45度と-45度の4層のlinear-gradientsを使用します。ドットは小さな半径と一致するbackground-sizeを持つradial-gradientを使用します。グリッドは薄い色止まりを持つ水平および垂直の2つのlinear-gradientsを使用します。シームレスパターンの鍵は、background-sizeがグラデーション数学と一致していることを確認することです。Background-positionオフセットを使用すると、より複雑な配置を作成できます。これらのパターンはGPUによってレンダリングされ、パフォーマンスへの影響は最小限です。解像度に関係なく完璧に拡大縮小します。複雑なパターンの場合、カンマで区切られたbackground-image値を使用して複数のバックグラウンドレイヤーが積層されます。各レイヤーには独自のbackground-sizeとbackground-positionを持つことができます。