CSS を使用して Web ページのストライプの背景スタイルを作成するためのヒントを共有する-CSSチュートリアル-php.cn

CSS を使用して Web ページのストライプの背景スタイルを作成するためのヒントを共有する

高洛峰

リリース： 2017-03-09 17:33:36

オリジナル

1742 人が閲覧しました

CSS の線形グラデーションを使用して、さまざまな方向のストライプ効果を表示できます。ここでは、CSS を使用して Web ページのストライプの背景スタイルを作成するテクニックについて学びます。水平ストライプ。

は次のとおりです。コード:

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

ログイン後にコピー

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

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

ログイン後にコピー

背景のサイズを設定すると、背景の高さが小さくなり、背景がデフォルトで繰り返され、縞模様の外観になります

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

ログイン後にコピー

背景の開始位置を設定することはできません2 番目の色を 0 に設定すると、ブラウザのデフォルトで続行します。前の色から開始します。

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

ログイン後にコピー

これは、30% の黄色と 70% の青色の縞模様の背景を形成します。複数の色の縞模様を設定することもできます。

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

ログイン後にコピー

2. 縦縞

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

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

ログイン後にコピー

3. 斜めのストライプ

background-size の値を変更し、linear-gradient に角度を追加することで、斜めのストライプを実現できます。
background : Linear-gradient(45deg, #fb3 50%, #58a 0); //背景のグラデーションを傾けますbackground-size:30px 30px //各小さなコンポーネントの幅と高さは固定です
;その結果、全体的な p の対角線ではなく、小さな対角線のパッチのみが形成されます。線形グラデーションで色分解を追加して、4 つの小さな p のグループに対角線を描画する必要があります。 4.repeat-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);

ログイン後にコピー

.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;   
}

ログイン後にコピー

rreee

.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);   
}

ログイン後にコピー

.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));   
}

ログイン後にコピー

HTML コード: CSS を使用して Web ページのストライプの背景スタイルを作成するためのヒントを共有する

.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));   
}

ログイン後にコピー

以上がCSS を使用して Web ページのストライプの背景スタイルを作成するためのヒントを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。