はじめに
この実験では、CSS を使ってジグザグの背景パターンを作成する方法を学びます。linear-gradient() を使い、background-size と background-position を調整することで、ウェブサイトの様々な要素に使用できる視覚的に魅力的なパターンを作成できます。この実験は、CSS のスキルを向上させ、CSS を使ってユニークなデザインを作成する方法をより深く理解するのに役立ちます。
これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この 初級 レベルの実験の完了率は 94%です。学習者から 100% の好評価を得ています。
ジグザグの背景パターン
VM 内には既に index.html と style.css が用意されています。
ジグザグの背景パターンを作成するには、次の手順を使用します。
background-colorを使用して白色の背景を設定します。- 4 つの
linear-gradient()値を持つbackground-imageを使用して、ジグザグパターンの部分を作成します。 background-sizeを使用してパターンのサイズを指定します。background-positionを使用して、パターンの部分を正しい位置に配置します。- パターンを繰り返すには、
background-repeatを使用します。 - 注記：要素の
heightとwidthは、示す目的だけのために固定されています。
以下はコードのサンプルです。
<div class="zig-zag"></div>
.zig-zag {
width: 240px;
height: 240px;
background-color: #fff;
background-image:
linear-gradient(135deg, #000 25%, transparent 25%),
linear-gradient(225deg, #000 25%, transparent 25%),
linear-gradient(315deg, #000 25%, transparent 25%),
linear-gradient(45deg, #000 25%, transparent 25%);
background-position:
-30px 0,
-30px 0,
0 0,
0 0;
background-size: 60px 60px;
background-repeat: repeat;
}
右下隅の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行してください。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。
まとめ
おめでとうございます！あなたはジグザグの背景パターンの実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。