溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
怎樣使用html/css設置背景圖片居中，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
在html/css中，可以利用background-position屬性來設置背景圖片居中，只需要給設置了背景圖片的元素添加“background-position: center;”樣式，即可設置背景圖片在水平和垂直方向居中顯示。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
html/css設置背景圖片居中的步驟
打開前端開發工具，新建一個html代碼頁面
在html代碼頁面上創建一個用于設置背景顏色的div標簽，然后給這個標簽添加上class = "bg-img"
設置背景圖片。創建style標簽，然后在標簽里面對類為bg-img設置背景圖片、圖片不重復、寬、高的樣式。樣式代碼：
.bg-img{
height: 100vh;
width: 100%;
background-image: url(img/car.jpg);
background-repeat: no-repeat;
}
保存html代碼，使用瀏覽器打開，這個時候會發現瀏覽器上的背景圖片顯示在左上角。
回到html代碼頁面，在bg-img類里添加background-position: center的樣式。
保存html代碼后重新刷新瀏覽器，這個時候會發現瀏覽器上的背景圖片已經自動居中了。
關于怎樣使用html/css設置背景圖片居中問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
