CSSで愛の背景パターンを作成します

この記事では、CSSを使用してリトルリトルラブパターンを繰り返してWebページの背景を作成する方法を紹介します。バックグラウンドイメージの属性を使用して愛の写真を設定し、バックグラウンドリピート属性を組み合わせることで、背景パターンの繰り返しタイルを簡単に実現できるため、Webページに暖かさとロマンスを追加できます。

繰り返しの小さな愛のパターンで背景を作成するには、CSSの背景イメージと背景繰り返しプロパティをマスターする必要があります。詳細な手順とサンプルコードは次のとおりです。

1。愛の写真を準備します

まず、愛の写真を準備する必要があります。写真形式はPNG、JPG、GIFなどです。タイルを繰り返したときに画像がより良くなるほど小さいことを確認してください。オンライン画像編集ツールを使用したり、自分でデザインしたりできます。 Image heart-image.pngに名前を付けて、プロジェクトフォルダーに保存します。

2。CSSを使用して背景写真を設定し、方法を繰り返します

CSS StyleSheetでは、ボディ、Divなどの背景を設定する要素を見つけます。その後、背景画像を使用して背景画像をラブイメージに設定し、バックグラウンドリピートプロパティを使用して画像の繰り返しを設定します。

体 {
  背景イメージ：url（ "heart-image.png"）; /*背景画像を設定*/
  バックグラウンドリピート：繰り返し; /*繰り返しメソッドを設定して、水平方向と垂直の両方を繰り返す*/
}

バックグラウンドリピート属性には、一般的に使用される値があります。

• 繰り返しますが、水平方向と垂直方向の両方でタイル画像を繰り返します。
• Repeat-X：タイリング画像を水平に繰り返します。
• 繰り返しますが、垂直方向のみでタイル画像を繰り返します。
• 繰り返し：タイリング画像を繰り返さないで、1回だけ表示します。

3.完全な例

ここに完全なHTMLおよびCSSの例があります：

 


  <title>愛の背景パターン</title>
  <style>
    体 {
      背景イメージ：url（ "heart-image.png"）;
      バックグラウンドリピート：繰り返し;
    }
  </style>


  <h1>私のウェブサイトへようこそ</h1>
  <p>これは、愛の背景パターンを備えたWebページです。 </p>

htmlファイルと同じディレクトリにheart-image.pngファイルを配置するか、バックグラウンドイメージプロパティのURLを正しい画像パスに変更してください。

4。その他の背景属性

バックグラウンドイメージとバックグラウンドリピートに加えて、他のCSSバックグラウンドプロパティを使用して、バックグラウンド効果をさらに制御することもできます。

• 背景サイズ：背景画像のサイズを制御します。たとえば、バックグラウンドサイズ：カバー;背景画像が要素全体をカバーできるようにします。
• 背景ポジション：背景画像の位置を制御します。たとえば、バックグラウンドポジション：センター;背景画像を中央に表示できます。
• 背景色：背景色を設定します。背景画像が要素を完全にカバーしていない場合、または画像が透明である場合、背景色が表示されます。

5。注意すべきこと

• あなたの愛の写真が繰り返されるとき、より良い動作をするのに十分なほど小さいことを確認してください。
• お客様のニーズに応じて、適切なバックグラウンドリピート値を選択してください。
• オンラインツールを使用したり、独自の愛の写真を設計したりできます。
• 画像パスが正しくない場合、背景画像は表示されません。

要約します

バックグラウンドイメージとバックグラウンドリピートのプロパティを使用することにより、小さな愛のパターンを繰り返してWebページの背景を簡単に作成できます。これらの基本的なCSSプロパティを習得すると、Webページの視覚効果をよりよく制御し、ユーザーにより良いエクスペリエンスを提供するのに役立ちます。さまざまな写真と属性値を試して、さまざまな背景効果を作成します。

以上がCSSで愛の背景パターンを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。