网页footer背景(stick footer布局)
2018-06-24 01:37:24来源：未知 阅读 ()
今天遇到了一个有意思的问题,想在网站的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是透明的原理,实现了这个功能
小伙伴们,你们想到了吗
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- 使用 Apache SSI(Server Side Includes) 制作多语言版静态网 2020-06-01
- css：背景（背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- 网页搜索框里显示字段鼠标点击后就隐藏的方法 2020-05-29
- 美化博客园样式 2020-05-17
- 【2020Python修炼记】前端开发之 网页设计超级酷炫小技巧 2020-05-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
