知っておくべき CSS 知識の背景プロパティ

CSS では、背景として単色を使用したり、画像を背景として使用したりすることができます。
背景設定について:

• background-color

   background-color:red;

  ログイン後にコピー

  —注:background-color は継承できず、デフォルト値は透明です。トランスペアレントとは「透明な」という意味です。つまり、要素で背景色が指定されていない場合、背景は透明になり、その祖先要素の背景が表示されます。

• background-image

   background-image:url(lks.jpg);

  ログイン後にコピー

  —注: 背景画像は継承できず、背景画像のサイズも変更できません。
  画像形式のブラウザサポート:

• gifアニメーション256色

• jpg 豊富な色、優れたブラウザサポート

• png w3cが推奨する形式ですが、ブラウザは十分にサポートしていませんOK (IE6、 IE7はサポートされていません）。

• background-repeat

  background-repeat:repeat;        //默认 背景图像将在垂直方向和水平方向重复。
  background-repeat:repeat-x;      //背景图像将在水平方向重复。
  background-repeat:repeat-y;      //背景图像将在垂直方向重复。
  background-repeat:no-repeat;     //背景图像将仅显示一次。

  ログイン後にコピー

• background-attachment

  background-attachment:scroll;    //默认值。背景图像会随着页面其余部分的滚动而移动。
  background-attachment:fixed;     //当页面的其余部分滚动时，背景图像不会移动。

  ログイン後にコピー

• background-position
  —注: 背景添付プロパティを次のように設定する必要があります。このプロパティが Firefox と Opera で適切に動作することを保証するために「修正」されました。

• background-position: <a href="//m.sbmmt.com/wiki/904.html" target="_blank">top<code>background-position：<a href="//m.sbmmt.com/wiki/904.html" target="_blank">top</a> left；
  第一个是指垂直方向上，第二个是指在水平方向上，中间空格隔开。
  垂直方向上可以设置：top、center、bottom；
  水平方向上可以设置：left、 center 、right；
  如果您仅规定了一个关键词，那么第二个值将是"center"。

• background-position：50% 50%；
  默认值：0% 0%。
  第一个值是水平位置，第二个值是垂直位置。
  左上角是 0% 0%。右下角是 100% 100%。
  如果您仅规定了一个值，另一个值将是 50%。

• background-position：20px 30px；
  第一个值是水平位置，第二个值是垂直位置。
  左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
  如果您仅规定了一个值，另一个值将是50%。

注意：

1、当我们为body设置border后，我们会发现border只是圈住了body里面有内容的地方。但是为body设置背景色，则填充整个屏幕。
2、使用图像作为背景时，图像他的定位是参照屏幕的可视区域，而不是被border框住的部分。
3、当我们想要一次性设置背景时，我们顺序是有考究的。
background：red url(xin.jpg) norepeat fixed center center; left;
first 1 つ目は垂直方向を指し、2 つ目はスペースで区切られた水平方向を指します。
垂直方向では、top、center、bottom

水平方向では、設定できるのは、left、center、right;
キーワードを 1 つだけ指定した場合、2 番目の値は「中心」になります。

background-position: 50% 50%;

最初の値は水平位置、2 番目の値は垂直位置です。 左上隅は 0% 0% です。右下隅は 100% 100% です。 値を 1 つだけ指定した場合、もう 1 つの値は 50% になります。

background-position: 20px 30px;

左上隅は0 0です。単位はピクセル (0px 0px) またはその他の CSS 単位です。 値を 1 つだけ指定した場合、もう 1 つの値は 50% になります。

注:

以上が知っておくべき CSS 知識の背景プロパティの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。