CSS 背景と境界タグの例の詳細な説明

1. CSS背景タグ

1.背景色を設定する

background-ground-color プロパティは、要素の背景色を指定します。
以下に小さな例を示します。

結果は次のとおりです。

セレクターを使用して、異なるタグに異なる色を設定できます。ここでは、h1、div、p タグに異なる背景色を設定します。
例:

実行結果は下の図に示されています。

2.背景画像を設定する

background-image プロパティは、要素の背景として使用する画像を指定します。デフォルトでは、画像は要素全体を覆うように繰り返されます。 URL を使用して外部画像をインポートします。
具体的な例は以下のとおりです。

実行結果は次のとおりです。

注意: 背景画像を使用する場合は、背景画像のスタイルに注意し、効果に影響を与えないようにテキストの邪魔になる画像を避けてください。

CSS background-repeat の問題 デフォルトでは、background-repeat プロパティは画像を垂直方向と水平方向の両方で繰り返します。一部の画像は、水平方向または垂直方向のみに繰り返す必要があります。水平方向のみに繰り返す場合は、(background-repeat: repeat-x;) を使用する必要があります。これにより、背景の見栄えが良くなります。画像を垂直方向のみに繰り返す場合は、background-repeat: repeat-y を設定する必要があります。
背景画像を 1 回だけ表示するように属性を指定することもできます。background-repeat: no-repeat タグを使用します。

4.背景画像の場所を指定する

背景画像の位置を指定するには、background-position タグを使用する必要があります。具体的な例を下図に示します。
次のコードは、右上隅に配置された背景画像を表示します。

実行結果は下の図に示されています。

5. 背景画像を固定する

background-attachment プロパティは、背景画像を固定するように設定するために使用されます。プロパティ値が scroll の場合、画像はページ要素とともにスクロールします (デフォルト値)。fixed の場合、画像は画面上に固定され、ページ要素とともにスクロールしません。

6.背景画像のサイズを設定する

background-size プロパティでは、背景画像の高さと幅を設定できます。最初の値は幅を設定し、2 番目の値は高さを設定します。値を設定すると、2 番目の値はデフォルトで自動になります。形式は次のとおりです。
背景サイズ: プロパティ 1 プロパティ 2;
以下に例を示します。

結果は次のとおりです。

7. 画像の透明効果を設定する

不透明度属性を使用すると、任意の要素を透明にすることができます。透明度は 0 から 1 までです。形式は次のとおりです。
不透明度: 不透明度値;

2. CSS 境界タグ

1. 境界線の色を設定する

（１）境界線のスタイルを設定する（border-style）
境界線スタイルは境界線のスタイルを定義するために使用されます。一般的なプロパティ値は次のとおりです。
none: 境界線なし、すべての境界線の幅を無視します (デフォルト)。
solid: 境界線は 1 本の実線です。
破線: 境界線は破線です。
点線: 境界線は点線です。
double: 境界線は二重の実線です。
ボックスの 1 辺のスタイルを設定することも、4 辺すべてのスタイルを包括的に設定することもできます。 border-style プロパティを使用して 4 辺のスタイルを包括的に設定する場合は、上、右、下、左の時計回りの順序に従う必要があります。省略すると、値の重複の原則が使用されます。つまり、1 つの値は 4 辺、2 つの値は上、下、左、右、3 つの値は上、左、右、下になります。
border-top-style: 上部のボーダースタイル
border-right-style: 右の境界線のスタイル。
borer-bottom-style: 下部の境界線のスタイル。
border-left-style: 下部の境界線のスタイル。
border-style: 上ボーダースタイル、右ボーダースタイル、下ボーダースタイル、左ボーダースタイル
border-style: 上の境界線のスタイル、左の境界線のスタイル、下の境界線のスタイル。
border-style: 上部と下部の境界線スタイル、左側と右側の境界線スタイル。
border-style: 上、下、左、右の境界線のスタイル。
（２）境界線の幅を設定する（border-width）
border-widthプロパティは境界線の幅を設定するために使用されます。その形式は次のとおりです。
border-width: 上[右下左];
上記の構文形式では、border-with プロパティは通常ピクセル (px) で表現されます。また、値の複製の原則に従って、その属性値は 1 から 4 に設定できます。つまり、1 つの値は 4 つの側面、2 つの値は上/下/左/右、​​3 つの値は上/左/右/下、4 つの値は上/右/下/左です。詳細は以下の通りです。
border-top-width: 上側の境界線の幅
border-right-width: 右の境界線の幅。
borer-bottom-width: 下の境界線の幅。
border-left-width: 下の境界線の幅。
border-width: 上ボーダー幅、右ボーダー幅、下ボーダー幅、左ボーダー幅
border-width: 上の境界線の幅、左の境界線の幅、下の境界線の幅。
border-width: 上下の境界線の幅、左右の境界線の幅。
border-width: 上、下、左、右の境界線の幅。
（３）境界線の色を設定する（border-color）
border-color プロパティは境界線の色を設定するために使用されます。その形式は次のとおりです。
border-color: 上[右下左];
境界線スタイルを設定する場合は、境界線スタイルを設定する必要があります。スタイルが設定されていないか、none に設定されている場合、他の境界線プロパティは無効になります。境界線の色の片側と全体設定は、上記の幅とスタイルの属性と同じ規則に従って時計回りの順序であるため、ここでは個別に説明しません。
（４）包括的な国境設定
border-top: 上部の境界線の幅、スタイル、色。
border-reight: 右の境界線の幅のスタイルと色
border-bottom: 下の境界線の幅、スタイル、色
border-left: 左の境界線の幅、スタイル、色
境界線: 四辺の幅、スタイル、色 (5) 丸い境界線
border-radius プロパティは、要素に丸い境界線を追加するために使用されます。
構文形式は次のとおりです。
境界半径: パラメータ 1/パラメータ 2
「パラメータ 1」はフィレットの水平半径を表し、「パラメータ 2」はフィレットの垂直半径を表します。2 つのパラメータは「/」で区切られます。 border-raidius プロパティを使用する場合、2 番目のパラメータが省略されると、デフォルトで最初のパラメータが使用されることに注意してください。 border-radius で境界の半径を設定します。

CSS 背景タグとボーダータグについてまとめたこの記事はこれで終わりです。CSS 背景タグとボーダータグに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。