CSS中有一項非常重要的背景屬性——background,它可以設置背景圖片、顏色、重復方式、位置等多種樣式。
首先我們來看一下如何設置背景圖片。使用background-image屬性來指定背景圖片,其屬性值可以是圖片的URL路徑,也可以是none(不顯示圖片)。
div { background-image: url("example.jpg"); }
此外,我們還可以設置背景圖片的重復方式,常用的有repeat(默認)、repeat-x(水平方向重復)、repeat-y(垂直方向重復)和no-repeat(不重復)。
div { background-image: url("example.jpg"); background-repeat: no-repeat; }
如果我們需要精確控制背景圖片在元素中的位置,可以使用background-position屬性。屬性值可以是像素值、百分比,也可以是left、right、top、bottom等關鍵字。
div { background-image: url("example.jpg"); background-repeat: no-repeat; background-position: center center; /* 居中顯示 */ }
最后,我們還可以設置背景圖片的大小,使用background-size屬性即可。屬性值可以是像素值、百分比,也可以是cover(等比例縮放圖片,以覆蓋整個元素)或contain(等比例縮放圖片,使其盡可能大,但不超過元素大小)。
div { background-image: url("example.jpg"); background-repeat: no-repeat; background-position: center center; /* 居中顯示 */ background-size: cover; /* 等比例縮放并覆蓋整個元素 */ }