CSS 作為網頁設計的重要組成部分,用來控制一些元素的樣式和排版,其中背景圖片的應用也不可忽視。使用 CSS 我們可以使背景圖片具有不同的大小和不同的行為表現。
首先我們需要在 HTML 代碼中指定背景圖片的位置,可以使用背景圖像屬性 background-image 來實現。例如:
p{ background-image: url(../images/background.jpg); }上述代碼設置了 p 元素的背景圖片為 “../images/background.jpg”。 此外,我們還可以用 CSS 控制背景圖片的大小、位置和重復方式。控制背景圖像大小的屬性為 background-size,我們可以通過設置百分比或特定的尺寸值來控制背景圖片的大小。代碼如下:
p{ background-image: url(../images/background.jpg); background-size: cover; }上述代碼設置了背景圖片的大小為 cover,即讓背景圖片填滿整個元素。 控制背景圖像的位置的屬性為 background-position,我們可以使用多種值來進行設置,比如 top left、center、bottom right 等等。代碼如下:
p{ background-image: url(../images/background.jpg); background-position: center; }上述代碼設置了背景圖片相對于元素垂直和水平居中對齊。 控制背景圖像重復的屬性為 background-repeat,我們可以通過設置 repeat-x、repeat-y、no-repeat 等值來控制背景圖片重復的方式。如下:
p{ background-image: url(../images/background.jpg); background-repeat: no-repeat; }上述代碼使背景圖片不進行重復顯示。 以上就是 CSS 在頁面背景圖片中的應用,通過控制不同的屬性我們可以讓背景圖片顯示得更加多樣化和個性化。
上一篇css地圖制