css盒模型設置什麼屬性可以顯示背景

在css盒模型中,設置背景的屬性,就是background屬性,但是,這一個屬性又附帶了其他一些屬性,因為,背景色要設置的內容很多

工具/原料

vscode

方法/步驟

打開vscode,創建一個測試html頁面,用於演示css的背景設置效果

在測試頁面中,添加一個div,設置固定高寬,以及邊框,用於後續的背景效果演示。另外,在測試頁面的同級目錄下,添加一張演示圖片

背景顏色設置,使用background-color屬性,這個屬性的值可以是red、blue這類顏色名稱,也可以是rgb或者16進位的顏色編碼

背景圖片設置,使用background-image屬性,通過這個屬性中的url,設置背景圖片的路徑即可

背景圖片的位設置,使用background-position屬性。這個屬性的值,可以是百分比,px像素值,top、right、bottom、left、center等等距離的值

背景圖片是否允許重複,使用background-repeat屬性,當值為no-repeat的時候,表示不允許重複。當值為repeat的時候,表示水平、垂直方形都自動重複。repeat-x、repeat-y則只在一個方向上重複

背景圖片的大小設置,使用background-size屬性,當值為兩個100% 100%的時候,就能自動拉伸圖片,填滿窗口

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場