ホームページ > 記事 > ウェブフロントエンド > CSS3 ストライプ背景の作成に関する実践的なチュートリアルを共有する
この記事では、CSS3 ストライプ背景作成の共有の実践的なチュートリアルを主に紹介します。Forefox ブラウザと Webkit カーネル ブラウザの 2 つの条件に分けて説明します。必要な方は、
Mozilla カーネル ブラウザを参照して背景を作成してください。グラデーション
1. シンプルな横ストライプのグラデーション背景を作成します
- mozilla core ブラウザの CSS スタイル:
body { background-color: #aaa; background-image:-moz-linear-gradient(#000 25%,#fc0 80%); background-size: 50px 50px; }
Firefox で表される表示効果は次のとおりです:
背景を変更します。サイズ値は背景のストライプの高さを制御します。上記の例では、-moz-linear-gradient の値を開始値と終了値の 2 つのグループに分割し、同時に開始値の開始位置と終了値の終了位置を設定します。位置の異なるパーツがグラデーションを形成します。開始位置より前の部分は開始カラー値で埋められ、終了値の後の部分は終了カラー値で埋められます。
2. ストライプの方向を変更します
上記のスタイルにパラメータのセットが追加されます。これが0degの場合、それは垂直になります。度数が大きくなるにつれて、反時計回りに回します。下の写真は、それぞれ 0 度および 45 度の場合の効果を示しています:
3. さらにいくつかの色のグラデーションを追加してみました
body { background-image:-moz-linear-gradient(0deg,#000 25%,#fc0 80%); }
ご覧のとおり、オリジナルに追加しました。 code 透明色 (透明度 25%) このグラデーションの位置は前のグラデーションの位置と一致します。
上の写真から、最初の色が突然止まっていることがはっきりとわかります。では、このようにさらに色を加えてみると、どのような効果があるのでしょうか?これを書きながら、内側の角度を0度に調整して、より鮮明に見えるようにするつもりです。
body { background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,#fc0 80%); }
レンダリングがどのように見えるか予想してみてください?
ここでは、background-size: 50px, 50px; と書かれているので、各ブロックの開始位置に注意してください。そして終了位置。
さて、元の0度を45度に変更するとどうなるでしょうか?
これはすでにツイル背景であることがわかるはずです。もう一度変更します:
body { background-image:-moz-linear-gradient(0deg,#000 25%,transparent 25%,transparent 50%,#fc0 50%,#f00 75%,transparent 75%); }満足のいく効果が得られましたか? 目的を達成するために色の値を変更してください。ここでもう 1 つの質問があります。background-size の値を設定するときに注意すべき点は何でしょうか。
5. 最終効果
上記のツイル背景が出てきましたが、まだ希望する最終効果には達していません。内部の色の値を再度変更して白に変更しましょう。現在の色の値は #fff で、これを rgba(255,255,255,1) の形式で rgba に変更します。最初の 3 つの数値は rgb、4 番目の数値はアルファです。このアルファを半透明に変更します。コードは次のようになります。以下: body {
background-image:-moz-linear-gradient(45deg,#000 25%,transparent 25%,transparent 50%,#000 50%,#000 75%,transparent 75%);
background-size:16px 16px;
}
webkit kernel
1. 次のように単純な縦縞の背景を作成します
CSS、ここでのレンダリングは上記の Firefox バージョンと比較できますbody {
background-color: #eee;
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
background-size: 16px 16px;
}
2、変更ストライプの方向、
body { background-color: #eee; background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000)); background-size: 80px 80px; }
3. 豊かな色のグラデーションを追加します
body { background-image:-webkit-gradient(linear,0 100%,100% 0,from(#fff),to(#000)); }
4. 色を調整し、透明色を追加します。
コードは次のとおりです:body {
background-image:-webkit-gradient(linear,0 0,100% 0,from(#fff),to(#000),color-stop(25%,#fc0),color-stop(50%,#0fc),color-stop(75%,#f0c))
}
5. ステップ2を押して方向を調整します
7、调整颜色值的透明度,最终效果如下: 虽然上面的斜纹背景已经出来了,但还没有达到我们想要的最终效果。我们再把里面的颜色值修改一下,换成白色。现在的颜色值为#fff,我们再把它换成rgba形式为rgba(255,255,255,1),前面的三个数字为rgb,第四个数字为alpha,现在我们把这个alpha改成半透明的,最终代码如下: 上面的代码加上了上面讲的mozilla内核浏览器下的写法,在火狐、谷歌浏览器中测试显示正常。
コードは次のとおりです:background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,#0fc),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#fc0),color-stop(75%,#f0c),color-stop(75%,transparent));
6、调整颜色,调整background-size大小 body {
background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,#000),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,#000),color-stop(75%,#000),color-stop(75%,transparent));
background-size: 16px 16px;
}
body {
background-color: #eee;
background-image: -moz-linear-gradient(45deg,#fff 25%, transparent 25%, transparent 50%,#fff 50%,#fff 75%, transparent 75%, transparent);
background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.2)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.2)),color-stop(75%,rgba(255,255,255,0.2)),color-stop(75%,transparent));
background-size: 16px 16px;
}
以上がCSS3 ストライプ背景の作成に関する実践的なチュートリアルを共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。