body的背景 背景background-color:預設border-box 畫布canvas 一塊區域 背景background-color的畫布的特點:(畫布大於等於視口) 最小寬度視口寬度 最小高度視口高度 html元素的背景: 覆蓋畫布 body元素的背景顏色(推薦) 如果html元素有背 ...
body的背景
背景background-color:預設border-box
畫布canvas
一塊區域
背景background-color的畫布的特點:(畫布大於等於視口)
最小寬度視口寬度
最小高度視口高度
html元素的背景:
覆蓋畫布 body元素的背景顏色(推薦)
如果html元素有背景顏色,body背景顏色正常覆蓋邊框盒,否則,body背景顏色覆蓋畫布 畫布設置背景圖片(總結就相對html元素)
背景圖寬度的百分比是相對於視口window.innerWidth
背景圖的高度百分比相對於html元素的height(網頁高度)
背景圖的橫向位置百分比,預設值,相對視口
背景圖的縱向位置百分比,預設值,相對html的height(網頁高度)
例子: html{ padding:10px; } body { width:1200px; border: 4px dashed red; background: url('../img/201801.png') no-repeat; background-size:50% 50%;//背景圖width=視口寬度*50%;背景圖高度height=html高度*50%; background-position:right 10px bottom 10px;//相對視口右邊10px,相對html下邊緣10px }