今天想寫個人的歡迎介面，又折騰起了前端，然而真的捉急呀
為了美觀點，花多點時間吧，又是淩晨三點了0.0
CSS實現單張背景圖片的填充
直接使用body元素的background-image屬性，多個瀏覽器安全色，基本滿足要求
添加background-color: #22C3AA;在載入圖片前顯示顏色
BUG：頁面太小時下方會留有空隙
詳細屬性w3school裡面的background屬性
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hello world</title> <style type="text/css">body {margin: 0;background-image: url('bg.jpg'); background-repeat:no-repeat; background-position:0% 0%; background-size:cover;background-color: #22C3AA;}</style></head> <body></body> </html> </span>
使用p，圖片能自適應瀏覽器的大小，不會出現body的bug
BUG：IE11不相容，下方會有一個綠線(body背景顏色)，十分不美觀
參見：HTML中使背景圖片自適應瀏覽器大小
<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>hello world</title> <style type="text/css">body {margin: 0;background-color: #22C3AA;}</style></head> <body><!--<p id="Layer1" style="position:absolute; width:100%; height:100%; background-color: #22C3AA; z-index:-1" > <img src="3-bg.jpg" height="100%" width="100%"/> </p>--></body> </html> </span>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
