CSSの背景
次の 2 つの例を通して、テーブル內(nèi)の屬性を 1 つずつ説明します。例 1: 背景色
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>PHP中文網(wǎng)</p> </body> </html>
style.css
/*背景色を赤に設(shè)定します*/
body{
background-color: red;
}
p{
width: 150px;
padding: 10px;
background-color: #0014ff;
}例 2: 背景畫像を設(shè)定します
プロジェクトフォルダーの下に畫像を配置する必要があります, この例では、cssで背景畫像を設(shè)定する際の參考となるpython.pngという名前の畫像を配置します。畫像は次のとおりです:
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>PHP中文網(wǎng)</p> </body> </html>
style.css
/*背景畫像としてpython.pngを設(shè)定*/
body{
background-image: url("python.png")
}実行結(jié)果:
表示された背景畫像に多くの Python 畫像があることがわかります。これは、背景畫像が繰り返し表示されるかどうかを設(shè)定するために、background-repeat 屬性を設(shè)定できるためです。 css.css 次の內(nèi)容を追加します
body{
background-image: url("python.png");
background-repeat: no-repeat;
}no-repeatは繰り返しできないことを意味します、repeatは繰り返し可能です、repeat-xはx軸が繰り返されることを意味します、repeat-yはy軸が繰り返されることを意味します
操作結(jié)果:
background-position を使用します。 畫像の開始位置を設(shè)定します。 次の例では、body 要素內(nèi)の中央上部から背景畫像を配置します。
body{
background-image: url("python.png");
background-repeat: no-repeat;
background-position:center top;
/\*大家可以嘗試去掉 top 來(lái)對(duì)比顯示效果\*/
} 
背景の値を指定するには、さまざまな方法があります。 -position 屬性。まず、使用できるキーワードがいくつかあります: 上、下、左、右、中央。通常、これらのキーワードはペアで表示されますが、常にそうとは限りません。 100px や 5cm などの長(zhǎng)さの値を使用することもでき、最後にパーセンテージ?jìng)帳蚴褂盲工毪长趣猡扦蓼埂帳违骏ぅ驻悿胜毪取⒈尘爱嬒瘠闻渲盲舾僧悿胜辘蓼?。屬性値についてはここでは詳しく説明しません。必要な場(chǎng)合は、w3school で検索できます。
背景の関連付け Web ページが比較的長(zhǎng)い場(chǎng)合、Web ページが下にスクロールすると、背景畫像も一緒にスクロールします。 Web ページが畫像を超えてスクロールされると、畫像が消えます。 このスクロールは、background-attachment 屬性を使用して防ぐことができます。この屬性を通じて、畫像が表示可能領(lǐng)域に対して固定されているため、スクロールの影響を受けないことを宣言できます:
body{
background-image: url("python.png");
background-repeat: no-repeat;
background-attachment:fixed;
}背景畫像のスクロールの防止 皆さんもよく目にすると思いますが、特に迷惑な広告がいくつかあります。
背景の位置
background-position プロパティを使用して、背景內(nèi)の畫像の位置を変更できます。
次の例では、背景畫像を body 要素內(nèi)の中央に配置します:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}background-position プロパティの値を指定する方法はたくさんあります。まず、使用できるキーワードがいくつかあります: 上、下、左、右、中央。通常、これらのキーワードはペアで表示されますが、常にそうとは限りません。 100px や 5cm などの長(zhǎng)さの値を使用することもでき、最後にパーセント値を使用することもできます。値のタイプが異なると、背景畫像の配置が若干異なります。
キーワード
畫像配置キーワードは最も理解しやすく、その名前が示すように機(jī)能します。たとえば、top right は、要素のパディング領(lǐng)域の右上隅に畫像を配置します。
仕様によれば、位置キーワードは、水平方向に対応するキーワードと垂直方向に対応するキーワードの 2 つ以下である限り、任意の順序で出現(xiàn)できます。
キーワードが 1 つだけ表示される場(chǎng)合、他のキーワードが中心とみなされます。
したがって、各段落の中央より上に畫像を表示したい場(chǎng)合は、次のように宣言するだけです:
p
{
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
}同等の位置キーワードは次のとおりです:
Percentage value
Percentage value 式はさらに複雑です。パーセンテージ?jìng)帳蚴褂盲筏埔貎?nèi)の畫像を中央に配置したいとします。これは簡(jiǎn)単です:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}これにより、畫像が適切に配置され、その中心がその要素の中心に揃えられます。つまり、パーセンテージ?jìng)帳弦丐犬嬒瘠蝸I方に適用されます。つまり、50% 50% と記述された畫像內(nèi)の點(diǎn) (中心點(diǎn)) は、50% 50% と記述された要素內(nèi)の點(diǎn) (中心點(diǎn)) と一致します。
畫像が 0% 0% の場(chǎng)合、その左上隅は要素のパディング領(lǐng)域の左上隅に配置されます。畫像の位置が 100% の場(chǎng)合、100% では畫像の右下隅が右マージンの右下隅に配置されます。
したがって、畫像を水平方向に 2/3、垂直方向に 1/3 に配置したい場(chǎng)合は、次のように宣言できます:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
}パーセント値のみが指定されている場(chǎng)合は、指定された値が水平方向の値として使用されます。垂直方向の値は 50% とみなされます。これはキーワードと似ています。
background-position のデフォルト値は 0% 0% で、機(jī)能的には左上と同等です。これは、別の位置値を設(shè)定しない限り、背景畫像が常に要素のパディング領(lǐng)域の左上隅からタイル表示される理由を説明しています
<html>
<head>
<style type="text/css">
body
{
background: #ff0000 url("http://img3.imgtn.bdimg.com/it/u=4051126327,266356416&fm=11&gp=0.jpg") no-repeat fixed center;
}
</style>
</head>
<body>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
<p>這是一些文本。</p>
</body>
</html>
