網頁頁腳footer的背景圖

今天遇到了一個有意思的問題,想在網站的foot裡面加入一張背景圖片,並且在footer的底部寫下一些內容於是乎在footer添加了background,並設置了footer的大小

先說一下開始的做法:

1.footer底部加background,並設定其大小

2.footer裡面加上div,寫內容

問題:內容總是在最上面,如果使用margin或padding則要指定一個固定值,萬一哪天換了背景豈不是要重新設定?

#於是百度,然後結合自己的思考找到了解決辦法:

1 padding-top: 410px;2 background: url('./img/footer.jpg') no-repeat center;3 background-size: 100%;4 background-position:top center;

原理,padding內部可以填充內容,比如背景圖片,所以把footer的padding-top頂部上去,就可以讓背景圖片也跟著上去了,當然還有background也要變成top,利用padding是透明的原理,實現了這個功能

小夥伴們,你們想到了嗎

以上是網頁頁腳footer的背景圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！