CSS での背景の使用法の簡単な分析

この記事の内容は、CSS における背景の使用法についての簡単な分析に関するもので、困っている友人に役立つことを願っています。

定義と使用法

基本属性: カラー、イメージ、位置、繰り返し

背景色 background-color

background-color

值为颜色值或transparent二者选其一,默认值是transparent（透明）。

• 颜色值可以为16进制颜色码或者RGB颜色值，也可以是英文代码。不建议使用英文代码，不同浏览器对不同颜色代码处理的效果有可能不同。

• 设置背景颜色作为后备也是很重要的。背景颜色在各处都得到了支持，而背景梯度等更奇异的特性只在较新的浏览器中得到支持，加上背景图像可能由于某种原因无法加载。因此，设置基本的背景颜色和指定这些特性是一个好主意，因此无论如何，元素的内容都是可读的。

背景图像 background-image

指定显示的背景图片，用url()设置路径。

• 默认的图片重复方式为水平垂直皆重复。

背景重复 background-repeat

指定背景图像如何重复的，默认值是repeat（一直重复，直到整个元素的背景被填充）

值	描述
no-repeat	不重复
repeat	垂直和水平都重复
repeat-x	X轴方向（水平）重复
repeat-y	Y轴方向（垂直）重复

背景位置 background-position

指定定位背景图片的位置，原点为左上角（0,0）。

• 可输入两个值代表 X 轴和 Y 轴，也可以只输入一个值。

• 可输入长度值（px等）、相对值（rem等）、百分比、关键字（left，center，right,top，bottom）

• 若只输入一个值，则代表 X 轴的值，Y 轴变成center

• 值可以混搭，如background-position:9px top;

额外属性

背景滚动 background-attachment 値は色の値または transparent 2 つのうち 1 つを選択します。デフォルト値は transparent (透明) です。

• カラー値は、16 進数のカラー コードまたは RGB カラー値、または英語コードにすることができます。英語のコードを使用することはお勧めできません。ブラウザーが異なれば、カラーコードの効果も異なる場合があります。

• フォールバックとして背景色を設定することも重要です。背景色はどこでもサポートされていますが、背景のグラデーションなどのより珍しい機能は新しいブラウザーでのみサポートされており、さらに、何らかの理由で背景画像が読み込まれない場合があります。したがって、基本的な背景色を設定し、これらのプロパティを指定して、要素の内容が何があっても読み取れるようにすることをお勧めします。 背景画像 background-image
  背景の繰り返し background-repeat 背景画像の繰り返し方法を指定します。デフォルト値は repeat です (繰り返すまで繰り返します)。要素の背景全体が塗りつぶされます) 説明 no-repeat

  表示する背景画像を指定し、url() を使用してパスを設定します。	デフォルトの画像の繰り返し方法は、水平方向と垂直方向の両方で繰り返します。
  	値

  no-repeat

  repeat

  垂直方向と水平方向の両方で繰り返します
  🎜 🎜リピートx🎜 🎜 X 軸方向 (横) に繰り返します 🎜🎜🎜🎜repeat-y🎜🎜 Y 軸方向 (縦) に繰り返します 🎜🎜🎜🎜🎜 背景位置 background-position🎜背景画像の位置を指定します 位置、原点は左上隅(0,0)です。 🎜
  • 🎜 X 軸と Y 軸を表す 2 つの値を入力することも、1 つの値のみを入力することもできます。 🎜
  • 🎜長さの値 (px など)、相対値 (rem など)、パーセンテージ、キーワード (left、) を入力できます。 center、right、top、bottom)🎜
  • 🎜 値を 1 つだけ入力すると、は X 軸の値を表し、Y 軸は center になります🎜
  • 🎜 値は、background-position:9px のように混合して一致させることができますtop;🎜
  🎜追加属性🎜 🎜背景スクロール background-attachment🎜🎜 コンテンツがスクロールするときに背景がどのようにスクロールするかを指定します。 🎜🎜🎜🎜🎜値 🎜🎜説明 🎜🎜🎜🎜🎜🎜スクロール🎜🎜のデフォルト値。スクロールすると、ページのスクロールに合わせて背景画像も移動します。 🎜🎜🎜🎜修正🎜🎜 ページの残りの部分をスクロールしたときに背景画像が動かないように修正しました。 🎜🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜CSS での border-sizing 属性の使用🎜🎜🎜🎜

以上がCSS での背景の使用法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。