CSS是網頁設計當中不可或缺的一部分,其中背景樣式也是一個十分重要的概念。下面讓我們來看一下CSS基礎篇背景樣式的相關知識。
body { background-color: #FFFFFF; }
代碼中的“background-color”就是CSS中的背景顏色屬性,其值為一個16進制代碼。上方的代碼表示將整個頁面的背景顏色設為白色。
div { background-image: url("image.jpg"); }
當然,在背景樣式中不僅可以設置純色背景,還可以使用圖片作為背景。上述代碼中,“background-image”屬性用來設置背景圖片的地址。圖片路徑需要寫完整,可以加上引號以防止出錯。
body { background-repeat: no-repeat; }
有時候,我們的背景圖片會出現“平鋪”的情況,這時可以使用“background-repeat”屬性來控制是否允許圖片重復。當將該屬性設為“no-repeat”時,圖片就不會重復出現。
div { background-position: center; }
還可以通過“background-position”屬性來改變圖片的位置。例如上述代碼將圖片放在了容器的正中央。
div { background-size: cover; }
同時,我們還可以通過“background-size”屬性來控制背景圖片的尺寸。當將該屬性設為“cover”時,圖片將會填滿整個容器。
以上就是CSS基礎篇背景樣式的相關知識。希望這篇文章能對大家有所幫助。