cssストライプの背景

Css Stripes Background

まず、記事で使用されている2つの知識ポイントを紹介します

背景サイズ属性

文法

By the way, the radial gradient: radial-gradient

css線形グラデーション

linear-gradient（to）|| ,,）

= [左|右] || [トップ|下]

角度の値を使用して、グラデーションの方向（または角度）を指定します。

= [| ]

grammar
radial-gradient( [ circle || ] [ at ]? , | [ ellipse || [ | ]{2}] [ at ]? , | [ [ circle | ellipse ] || ] [ at ]? , | at , [ , ]+ )

background-position

値

対 transform-origin または 0% 同様。デフォルトでは、デフォルトは中心点です。

グラデーション形状。円形（グラデーション形状は一定の半径を持つ完全な円）または楕円（軸対称楕円）。デフォルト値は楕円です。

グラデーションのサイズ。含まれている値は、以下の寸法定数表に示されています。

特定の位置を表す固定色値。 値とオプションの位置値（仮想グラデーション光線に対して） または 長さの値）。パーセンテージ値0、または長さ値100%、グラデーションの中心点を示しますパーセンテージ値closest-sideグラデーション光線がエッジ形状と交差するポイントを表します。その間のパーセンテージ値は、グラデーション光線上のポイントに直線的に対応します。

キーワードは、エッジ輪郭の特定の位置を説明するために使用されます。キーワード定数は次のとおりです。

絶え間ない	説明
closest-corner	グラデーションのエッジ形状は、グラデーションの中心に最も近いコンテナの側面（円）、または少なくともグラデーションの中心に最も近い垂直エッジと水平エッジ（楕円）に接しています。
farthest-side	グラデーションのエッジの形状は、グラデーションの中心に最も近いコンテナのコー​​ナーと交差します。
farthest-corner	最も近い側とは異なり、エッジの形状は、グラデーションの中心から最も遠いコンテナの側（または最も遠い垂直方向と水平方向の側面）に接しています。
background-size: length | percentage |cover|contain	グラデーションのエッジ形状は、グラデーションの中心から最も遠いコンテナのコー​​ナーと交差します。

|_+_|

もう一度コードを変更しましょう：

background: linear-gradient(to top,red ,blue )

レンダリングは次のようになります。

リライト：

background: linear-gradient(to top,red 50% ,blue 50%) 
background-:

横縞が現れる

色の後ろのパーセンテージ、つまりカラーマークの位置が一致して、横縞効果を形成します。

3つ以上の色を書くことも可能です：

background: linear-gradient(to top,red 50% ,blue 50%) background-size:100% 30px 

縦縞

元の横縞は、背景サイズと線形=グラデーションのグラデーション方向を変更するだけです

background: linear-gradient(to top,red 33.3% ,blue 0%,blue 66.7%,pink 0) background-size:100% 90px 

難易度：斜めのストライプ

45度の斜めのストライプパターンを取得したい場合はどうなりますか？

最初に私はこれを書いた：

background: linear-gradient(to right,red 33.3% ,blue 0%,blue 66.7%,pink 0) background-size:90px 100% 

効果は次のとおりです。

明らかに、これは私たちが望んでいることではありません。

情報をクエリして、それがパターン内の各パッチであることを確認します 内部グラデーションは45度回転します。繰り返される背景を45度回転させる代わりに。

解決：

このパッチで 、背景全体をカバーするには：1つのパッチに4つのストライプが含まれます：

 background: linear-gradient(45deg,green 50%,yellow 0) background-size:30px 30px 

効果画像：

注：background-sizeの値は、パッチの直角三角形の幅ではなく、小さな緑色の三角形の斜辺の長さであり、幅は高さです。

より良い斜めのストライプ

60度が必要な場合はどうなりますか？または10度？

解決策：線形グラデーション（）の拡張バージョンを使用します。繰り返し線形グラデーション（）

2つは同じように機能しますが、1つの違いがあります。それは、カラーコードが無限ループで繰り返されることです。背景をまっすぐ横切って。

利点の1つは、背景サイズが不要で、長さがグラデーションカラースケールで直接指定されることです。

 background: linear-gradient( 45deg,green 25%,yellow 0,yellow 50%,green 0,green 75%,yellow 0) background-size:45px 45px 

上記のレンダリングは、グラデーションを繰り返すことでも完了できます。

 background: repeating-linear-gradient(10deg,green ,yellow 45px) 

ストライプを繰り返すことの利点は、角度を自由に変更できることですが、水平および垂直のストライプを実現するには、線形グラデーションを使用します。斜めのストライプは、繰り返し線形グラデーションを使用します。

45度を処理する場合、2つを組み合わせることができます。

ホモクロマティックストライプ

 background: repeating-linear-gradient(45deg,green ,green 22px,yellow 22px,yellow 45px)

グリッド

複数のグラデーションを組み合わせることもできます。たとえば、水平方向のグラデーションと垂直方向のグラデーションのストライプを重ね合わせて、次のテーブルクロスパターンを形成できます。

 background: gray background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0,transparent 30px) 

効果画像：

さらに、グリッド内のグリッドを調整でき、グリッド線の太さを固定したままにする場合、カラースケールの値はパーセンテージではなく固定長になります。

 background: white 
 background-image: linear-gradient(90deg, rgba(200,0,0,0.5) 50%,transparent 0), linear-gradient(rgba(200,0,0,0.5) 50%,transparent 0) 
 background-size: 30px 30px 

レンダリング

ウェーブポイントグラフィック：

background: #58a 
 background-image: linear-gradient(90deg,white 1px,transparent 0), linear-gradient(white 1px,transparent 0) 
 
background-size: 30px 30px 

効果画像：

転載：https：//www.cnblogs.com/rain-null/p/6623025.html