この記事は、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;
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. 包括的な例
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; }
.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)); }
関連する推奨事項:
CSS3 属性遷移に基づいてメニュー ナビゲーションを作成する効果
CSS3 での変換モデル レンダリングの分析 CSS グラデーション カラー省略マーク埋め込みフォント テキスト シャドウの包括的な入門以上がCSS を使用した Web ページの縞模様の背景スタイルの作成の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。