CSSの背景グリッド：垂直の列が1つの水平の繰り返し線形勾配

Question

CSSのみを使用して単一の要素に特定の背景パターンを作成しようとしています。

background-image: repeating-linear-gradient(
        to bottom, 
        #f7f7f8 0, 
        #f7f7f8 32px, 
        rgba(255, 255, 255, 0) 32px, 
        rgba(255, 255, 255, 0) 64px 
); 

しかし、私は、縦棒と組み合わせるのに苦労しています：私は、次を使用して繰り返し横縞を作成することができます

：下の画像は、私が目指しています最終的な結果を示しています右の方へ。私はそれが必要...それは私が欲しいものを達成することが可能です場合でも、わからない：

• はピクセル単位で、固定幅て右端から
• 、ピクセル単位で設定した距離とすること
• 下の水平グリッドを完全にオーバーレイします。下にある色に関係なく同じ色でなければなりません。透明ではありません。

これは可能ですか？

Answer 1

2つのグラデーションを重ね合わせることができます。最初は常に次の一番上にあります。

html { 
 
    min-height: 100%; 
 
    background: linear-gradient(
 
     to left, 
 
     transparent 140px, 
 
     grey 140px, 
 
     grey 143px, 
 
     transparent 143px 
 
    ), 
 
    repeating-linear-gradient(
 
     to bottom, 
 
     lightgrey 0, 
 
     lightgrey 20px, 
 
     transparent 20px, 
 
     transparent 40px 
 
    ); 
 
}