第二十三章背景関係

第187課背景寸法属性

背景サイズ属性は、CSS 3に新たに追加された属性であり、背景画像サイズの設定に特化している
デフォルト:画像は自分のサイズで要素全体をコピーします.
background-image: url("../image/o.gif");
具体的な画素:画像は設定した画素によって表示する
background-size: 100px 80px;
パーセント:画像は要素のサイズのパーセントによって表示されます.
background-size: 50% 60%;
幅等比例延伸:画像は設定された高さ等比例に従って延伸表示される
background-size: auto 50%;
高さ等スケールストレッチ:画像は設定した幅等スケールでストレッチ表示されます
background-size: 60% auto;
cover:画像が等比例して伸び、幅の高さが要素全体を満たすまで表示
background-size: cover;
contain:幅または高さが満たされる要素が表示されるまで、画像の等比例延伸
background-size: contain;

第188課背景画像位置決め領域属性

システムの背景画像がどの領域から表示されるかを教え、デフォルトではpadding領域から表示されます.
background-origin: padding-box; background-origin: border-box; background-origin: content-box;

第189課背景描画領域属性

バックグラウンドペイント領域プロパティは、どの領域からバックグラウンドをペイントするかを指定するために使用されます.デフォルトではborder領域からバックグラウンドをペイントします.
background-clip: border-box; background-clip: padding-box; background-clip: content-box;

第190課多重背景画像

複数の背景画像の間をカンマで区切るだけでいい
background:url("../image/o.gif") no-repeat left top, url("../image/call.jpeg") no-repeat right top;
注意点
先に追加した背景画像は、後に追加した背景画像を覆います.
複数のバックグラウンドを作成するときに分割して作成することをお勧めします
background-image: url("../image/o.gif"),url("../image/call.jpeg"); background-repeat: no-repeat; background-position: left top, right top;

第191課多重背景画像練習

コードを見る練習をする