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

不言
リリース: 2018-07-02 11:07:41
オリジナル
2434 人が閲覧しました

この記事は、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中国語ウェブサイトです!


関連する推奨事項: 2016531113058955.png (1190×539)

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

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


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


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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート