CSS+html如何實現背景圖片的填滿詳解
- 黄舟原創
- 2017-07-22 09:16:525418瀏覽
引言：
今天想寫個人的歡迎介面，又折騰起了前端，然而真的捉急呀
#為了美觀點，花多點時間吧，又是凌晨三點了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>以上是CSS+html如何實現背景圖片的填滿詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn