CSS中讓背景圖居中是一種經常使用的技巧。在開發網站時,我們經常需要添加背景圖來增加頁面的視覺效果。但是,如果背景圖不居中,會導致頁面效果變差。以下是CSS中讓背景圖居中的幾種方法:
/* 方法一:使用background-position屬性 */ body { background-image: url("images/bg.jpg"); background-repeat: no-repeat; background-position: center center; } /* 方法二:使用background-size屬性 */ body { background-image: url("images/bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center; } /* 方法三:使用flex布局 */ body { display: flex; justify-content: center; align-items: center; background-image: url("images/bg.jpg"); background-repeat: no-repeat; }
以上三種方法都可以讓背景圖在頁面中居中顯示。根據不同的需求,我們可以選擇不同的方法。方法一和方法二比較適合簡單的背景圖,方法三則適用于需要居中的元素比較復雜的情況。