背景とリスト
css背景スタイル
background- colorbackground
-image
background-position
background-attachment
background-repeat
backgroundの省略形、ステートメントでbackground属性を設定します
cssリストスタイル
リストスタイルタイプ
リストスタイルイメージ
リストスタイル位置
リストスタイル省略形
背景にはコンテンツ、パディング、ボーダー、ただし、余白
枠がない場合、スタイルが設定されていないと背景は表示されません。
div{
width:30px;
height:30px;
background-image:url(little.png);
padding:20px;
margin:20px;
border:10px dashed;
background-color:red;
}
背景画像と背景色を同時に設定すると、表示は背景画像
実際、最初に色が表示され、次に画像が色にオーバーレイされます
ただし、繰り返される背景画像の見栄えが良くない場合があります。要素の背景画像の繰り返しモードを設定します
。background-repeat：repeat | no-repeat | repeat-x | repeat-y
背景画像表示モード
background-attachment：スクロール|固定
説明：
scroll：デフォルト値、背景画像はスクロールバーが
固定された状態でスクロールします：ページの残りの部分がスクロールすると、背景画像は移動しません
背景画像の配置
要素の背景画像の開始位置を設定します
background-position：
パーセンテージ│値|上|右l下|左|中央の
背景略語
background：[background-color] [background-image]
[background-repeat]
[background -添付ファイル]
[背景位置] []
説明
・値を特定の順序で区切るためにスペースを使用します
div{
width:30px;
height:30px;
background:#000 url(little.png) no-repeat top fixed;
padding:20px;
margin:20px;
border:10px dashed;
}
ここでの固定はウェブページ全体を基準にしているため、表示されない画像がある場合があります。上部と固定は固定されていますが、表示されていないときは非表示になっています。幅を100％に変更してみてください。
リストアイテムマークリストアイテム
のマークスタイルタイプを設定します
list-style-type：keyword | none
画像を使用して
リストアイテムのマークを設定しますlist-style-image：url | none
ul li{
list-style-image:url(1.jpg);
}
リストアイテムマーカーの位置を設定しますlist-style-position：内側|外側
内側：リストアイテムマーカーはテキストの内側に配置され、周囲のテキストはマーカーに従って配置されます
外側：デフォルト値、リストアイテムのマークはテキストの外側に配置され、周囲のテキストはマークに従って整列されません
リストスタイル：リストスタイルタイプリストスタイル位置リストスタイルイメージ
注：
値はスペースで区切られ、
順序は異なります修正された
リストスタイルの画像上書きしますリストスタイルタイプの設定
ul li{
list-style:url(1.jpg) square inside;
}
総括する：
次へ：
cssボックスモデル、ページレイアウト