Rumah >hujung hadapan web >html tutorial >网页页脚footer的背景图

网页页脚footer的背景图

巴扎黑
巴扎黑asal
2017-07-21 09:17:566251semak imbas

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

小伙伴们,你们想到了吗

Atas ialah kandungan terperinci 网页页脚footer的背景图. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn