CSS を使用した Web ページの縞模様の背景スタイルの作成の概要

この記事は、Web ページのストライプの背景スタイルを作成するための CSS の導入を主に紹介します。これは、必要な友人に参照してもらえるように共有します。さまざまな方向の CSS ストライプ効果 ここでは、CSS を使用して Web ページのストライプの背景スタイルを作成するテクニックを詳しく説明します

1. 水平ストライプ

次のコード:上のコードは画像全体の上部を表します。20% と下部 20% は対応する単色で、中央部分のみがグラデーション色です。真ん中の部分を徐々に減らしていって、真ん中の部分が0になったとき、つまり上下の色の7つの点と端点が同じになったとき、グラデーションはなくなり、2色のカラーバーになります。

background: linear-gradient(#fb3 20%, #58a 80%)

次に、背景のサイズを設定することで設定できます。これにより、背景の高さが小さくなり、背景がデフォルトで繰り返され、縞模様の形状になります

background: linear-gradient(#fb3 50%, #58a 50%);

2 番目の色を 0 に設定すると、ブラウザはデフォルトで前の色から開始します :

background: linear-gradient(#fb3 50%, #58a 50%);   
background-size: 100% 30px;

これにより、30% が黄色、70% が青の縞模様の背景が形成されます

以下に 3 色の縞模様を設定することもできます。 :

background: linear-gradient(#fb3 30%, #58a 0);   
background-size:100% 30px;

2. 縦縞

線形グラデーション法にプレフィックスを追加するだけです。背景サイズの長さと幅の設定も逆にする必要があることに注意してください

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%,yellowgreen 0);   
background-size: 100% 45px;

3. 斜めのストライプ

背景サイズの値を変更し、線形グラデーションに角度を追加することで、斜めのストライプを実現できます。 Linear-gradient(45deg, #fb3 50%, #58a 0); //背景のグラデーションに傾きを持たせます

background-size:30px 30px; //各小さなコンポーネントの幅と高さは固定です;全体の p 個の対角線の代わりに、小さな対角線を形成します。4 つの小さな ps のグループとして対角線を描画し、線形グラデーションで色分解を追加する必要があります。

background: linear-gradient(to rightright, #fb3 50%, #58a 0);     
background-size:30px 100%;

4. 繰り返しを使用します。 -linear-gradient

斜めの背景描画にはrepeat-linear-gradientメソッドを使用するとより効果的です。この方法を使用すると、p 全体が覆われるまで、設定された色の変更が自動的に繰り返されます。コード例は以下の通りです。

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a50%, #fb3 0, #fb3 75%, #58a 0);     
background-size:30px 30px;

このようにして、上記の方法で難しい調整をすることなく、任意に角度を変更することができます Background:repeating-linear-gradient(60deg, #fb3, #fb315px, #58a 0, # 58a 30px);
(この方法は実際にはサイズ制御とグラデーション制御を組み合わせるのと同じです)

5.色の設定について

ストライプの背景の色を同系色にしたい場合がありますが、手動で設定するのは不便です。この色の#もあり、どの色を選べばよいのかもわかりにくいです。次の方法を使用できます:

background: repeating-linear-gradient(45deg, #fb3, #58a 30px);

この方法の原理は、背景で最も暗い色を指定し、記事内の他の類似した色を透明度で調整することです
6. 包括的な例

レンダリングはここにまとめられています。以下のスタイルは 1 対 1 に対応します:

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

rreee

.stripes {   
    height: 250px;   
    width: 375px;   
    float: left;   
    margin: 10px;   
    -webkit-background-size: 50px 50px;   
    -moz-background-size: 50px 50px;   
    background-size: 50px 50px; /* 控制条纹的大小 */
    -moz-box-shadow: 1px 1px 8px gray;   
    -webkit-box-shadow: 1px 1px 8px gray;   
    box-shadow: 1px 1px 8px gray;   
}

.horizontal {   
    background-color: #0ae;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
}

.vertical {   
    background-color: #f90;   
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));   
    background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
    background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);   
}

HTML コード:

.picnic {   
    background-color:white;   
    background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),   
                      -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));   
    background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
    background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),   
                      linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));   
}

以上がこの記事の全内容です。その他の関連コンテンツについては、こちらをご覧ください。 PHP中国語ウェブサイトです！

関連する推奨事項:

CSS3 属性遷移に基づいてメニュー ナビゲーションを作成する効果

CSS3 での変換モデル レンダリングの分析

CSS グラデーション カラー省略マーク埋め込みフォント テキスト シャドウの包括的な入門

以上がCSS を使用した Web ページの縞模様の背景スタイルの作成の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。