Comments
Description
Transcript
P218-219【PDFダウンロード】
Technique:115
1 { background-attachment: 2 }
構文
Definition
1：body
2：値
プロパティ・値・効果
プロパティ
background-attachment
値
効果
fixed
画像を固定する
・背景画像の不透明度を下げておこう
scroll
画像を固定しない
ページの背景に写真を表示する場合は、あらかじめ
写真の不透明度を下げたものを指定したほうがよい
Text
スクロールしても
背景画像が
動かないように
したい
でしょう。写真をそのまま背景の画像として使用す
ると、写真の色が強く、テキストやオブジェクトな
にテキストの色と写真の色が被ってしまい、読み
づらくなってしまうこともあります。この場合は、
Photoshop などの画像処理ソフトで、写真の不透明
度を下げておきましょう。
background-attachment プロパティを利
List
用すると、背景の画像を固定させることがで
きます。背景の画像を固定すると、ページの
テキストやオブジェクトだけがスクロールさ
れるようになります。
Font
どが見づらくなる場合があります。また、部分的
横方向に敷き詰めた画像を固定する
Background
Background
Source
background-attachment プロパティを指定しな
い場合は、初期値の「scroll」が適用され、背景の
Position
background-image:url(nanohana.jpg);
background-repeat:no-repeat;
background-attachment:fixed
}
Box
Chapter 05
CSS
body{
画像もテキストなどと同時にスクロールされます。
h2{
img{ float: left }
218
XHTML&CSS_part2 chap05.indd 218-219
body{
background-image:url(back01.gif);
background-repeat:repeat-x;
background-attachment: fixed
}
background-repeat プ ロ パ テ ィ の 値 を「repeat-x」
に指定し、background-attachment プロパティの
値を「fixed」に指定すると、横方向に敷き詰められた
画像を固定することができます。
h2{
Others
XHTML
<body>
<h2>プロローグ</h2>
<p>
飛行機の外には、ほとんど光らしいも（中略）きな衝撃。飛行機の車輪が地を引っ掻き、振動が体を突き上げる。
</p>
<img src="17.jpg">
<p>
まっすぐ整列した誘導灯が綺麗だ。他の乗客は（中略）白熱灯の色が目に焼きついた。
</p>
</body>
Source
Filter
p {
color: #0033CC;
（以降省略）
Table
color: #009999;
font-family:serif;
margin: 20px
}
color: #FF3333;
margin-top: 160px
}
p {
color: #CC3333;
font-weight: bold;
}
219
09.11.2 10:50:55 AM