CSS 要素を使用してカラフルな背景を 1 つのトリックで作成する-CSSチュートリアル-php.cn

CSS 要素を使用してカラフルな背景を 1 つのトリックで作成する

醉折花枝作酒筹

リリース： 2021-08-12 15:33:49

オリジナル

2550 人が閲覧しました

この記事では新しい章が始まります。見栄えの良いものはすべて色と切り離すことができません。今日は最も単純な要素の背景色の設定を学習します。来て学びましょう。

また、背景色のない要素は見た目が良くないこともわかっているため、要素の背景色を設定する必要があります。

まず、背景色とは何なのか、そしてその設定方法を理解するために、小さな例を見てみましょう。

div 要素と p 要素があることはわかっています。div 要素の背景色を赤、p 要素の背景色を青にしたいのですが、どうすればよいでしょうか?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      background-color: red;
    }
    p{
      background-color:blue;
    }
  </style>
</head>
<body>
<div>为了显示，表明这个一个div元素</div>
<p>为了显示，表明这个一个p元素</p>
</body>
</html>

ログイン後にコピー

この小さな例の結果は次のとおりです

CSS 要素を使用してカラフルな背景を 1 つのトリックで作成する

ご覧のとおり、質問で指定された要件、背景色を完了しました。 div 要素の背景色は赤、p 要素の背景色は青です。

ここまで理解したところで、背景色を設定できるプロパティを見てみましょう。

background-colorこのプロパティは、要素の背景色を設定します。このプロパティは、要素の単色を設定します。この色は、要素のコンテンツ、パディング、境界領域を塗りつぶし、要素の境界線の外側の境界まで広がります (ただし、余白は含まれません)。枠線に透明部分（点線枠など）がある場合、その透明部分に背景色が透けて見えます。

この属性には、透明な値である非常に重要な値もあります。ただし、ほとんどの場合、transparent を使用する必要はありません。ただし、要素に背景色を持たせたくない場合や、ユーザーのブラウザの色の設定がデザインに影響を与えたくない場合は、依然として透明値の設定が必要です。

推奨学習: css ビデオチュートリアル

以上がCSS 要素を使用してカラフルな背景を 1 つのトリックで作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。