ホームページ  >  記事  >  ウェブフロントエンド  >  CSS の背景プロパティとは何ですか? CSS背景プロパティの概要(コード付き)

CSS の背景プロパティとは何ですか? CSS背景プロパティの概要(コード付き)

不言
不言オリジナル
2018-08-04 10:52:405777ブラウズ

CSS の背景属性は HTML 要素の背景を定義するために使用されます。それでは、CSS の背景属性とは何でしょうか?たとえば、css 背景色属性と css 画像背景属性はすべて css 背景属性に属します。この記事では、css 背景属性に関連する属性をまとめます。

まず、CSS 関連のプロパティを見てみましょう:

  • background-color: css は背景色を設定します

  • background-image: css は画像の背景を設定します

  • background -repeat: css 背景画像を繰り返すかどうか、およびどのように繰り返すかを設定します

  • background-position: css は背景画像の位置を設定します

  • background-attachment: 背景画像が固定されるか、残りの部分と一緒にスクロールするかどうかを設定しますpage

  • background: 略記属性、この機能はステートメントで背景属性を設定することです

要素の背景の範囲:

背景は要素のコンテンツ、パディング、境界領域を塗りつぶします、要素の境界線の外側の境界まで延長されます (ただし、外側のエッジの距離は含まれません)。枠線に透明部分(点線枠など)がある場合、その透明部分に背景色が透けて見えます。

ブラウザのサポート:

すべての主要なブラウザは背景属性をサポートしています。

注: IE7 以前のバージョンは、「継承」値 (inherit) をサポートしていません。 IE8 では !DOCTYPE を定義する必要があります。 IE9は「継承」をサポートしています。 inherit)。 IE8需要定义!DOCTYPE。 IE9支持"继承"。

css背景颜色:

background-color

css 背景色:

  • background-color 属性は、要素の背景色を定義するために使用されます。

    body {background-color: #b0c4de;}

    CSS では、色の値は通常次の方法で定義されます:
  • Hex - 例: #ff0000
  • RGB - 例: rgb(255,0,0)
  • 色の名前 - 例: 赤
  • デフォルト - 透明、透明を意味します。要素で背景色が指定されていない場合、背景は透明になります。

inherit は親要素から背景色を継承します。これには IE との互換性の問題があります。

css画像の背景:

background-image属性は、要素の背景画像を定義するために使用されます。

デフォルトでは、背景画像は要素の左上隅に配置され、水平方向と垂直方向に繰り返されます。

body {background-image: url('paper.gif');}

    ヒント:
  • 背景色と背景画像は共存できます。背景画像が利用できない場合でも、ページに優れた視覚効果を得ることができるように、利用可能な背景色を設定してください。

    body {background-image: url('paper.gif');background-color:#fff;}

    属性値:
  • none - デフォルトでは背景画像なし
  • url('image path') - 画像のアクセス可能なパス。ネットワークアドレス、相対パスアドレス、絶対パスアドレスを使用できます

継承 - 親要素から継承します

css 背景の繰り返し:

  • 背景を並べて表示する必要がある場合は、background-repeat 属性を使用できます。

    body {
        background-image: url('gradient2.png');
        background-repeat: repeat-x;
    }

    属性値:
  • repeatにより、デフォルトで画像が水平方向と垂直方向に並べて表示されます。
  • repeat-x とrepeat-y は、それぞれ背景画像を水平方向または垂直方向にのみ繰り返します。
  • no-repeat では、画像をどの方向にも並べて表示できません。

inherit は親要素から継承します。

cssの背景の位置:

background-position属性は、背景画像の位置を制御するために使用され、通常はbackground-repeat: no-repeat;と組み合わせて使用​​されます。

body {
    background-image: url('img_tree.png');
    background-repeat: no-repeat;
    background-position: right top;
}

background-position プロパティの値を指定するには、さまざまな方法があります。まず、使用できるキーワードがいくつかあります: 上、下、左、右、中央。通常、これらのキーワードはペアで表示されますが、常にそうとは限りません。 100px などの長さの値を使用し、最後にパーセント値を使用することもできます。

キーワード:

画像配置キーワードは最も理解しやすく、その名前が示すように機能します。たとえば、top right は、要素のパディング領域の右上隅に画像を配置します。

仕様によれば、位置キーワードは、水平方向に対応するキーワードと、右上と垂直方向に対応するキーワードが 2 つ以下である限り、任意の順序で出現できます。

キーワードが 1 つだけ表示される場合、他のキーワードが中心とみなされます。

パーセンテージ:

パーセンテージ値はより複雑な方法で表現されます。パーセンテージ値を使用して要素内の画像を中央に配置したいとします。

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

画像が 0% 0% の場合、その左上隅は要素のパディング領域の左上隅に配置されます。画像の位置が 100% の場合、100% では、画像の右下隅が右マージンの右下隅に配置されます。

画像を水平方向に 2/3、垂直方向に 1/3 に配置します:

body { 
    background-image: url('/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-position: 66% 33%;
}

パーセンテージ値のみが指定された場合、指定された値が水平方向の値として使用され、垂直方向の値は 50% とみなされます。

🎜長さの値: 🎜🎜🎜長さの値は、要素のパディング領域の左上隅のオフセットを説明します。オフセット ポイントは画像の左上隅です。 🎜

比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上。

css背景固定:

background-attachment 属性设置背景图片是否固定或随页面的其余部分滚动。

body {
    background-image:url('image.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
}

属性值:

  • scroll 默认。背景图像会随着页面其余部分的滚动而移动。

  • fixed 当页面的其余部分滚动时,背景图像不会移动。

  • inherit 从父元素继承。

简写属性:

background 属性在一个声明中设置所有背景属性。

body { 
    background: #00FF00 url('bgimage.gif') no-repeat fixed top;
}

如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url('smiley.gif'); 也是允许的。

通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

相关文章推荐:

你不知道的CSS背景—css背景属性全解

详解css之背景background属性

以上がCSS の背景プロパティとは何ですか? CSS背景プロパティの概要(コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。