今天遇到了一个有意思的问题,想在网站的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是透明的原理,实现了这个功能
小伙伴们,你们想到了吗