首页 > web前端 > html教程 > 网页页脚footer的背景图

网页页脚footer的背景图

巴扎黑
发布: 2017-07-21 09:17:56
原创
6260 人浏览过

今天遇到了一个有意思的问题,想在网站的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中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板