為頁面的某一元素新增背景圖片，當沒有指定具體的寬高時，是無法顯示效果的
1、新增背景圖
HTML程式碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<title></title>
<style>
*{margin:0; padding:0;}
#wrap{
width:100%;
height:auto;
background:url('images/page.jpg') no-repeat center center;
background-size:cover;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>登入後複製
我們可以看看頁面效果截圖：
為了達到適應不同終端的螢幕大小，我們又無法把寬高寫死，那怎麼辦呢？可以採取以下方法：
HTML程式碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<title></title>
<style>
*{margin:0; padding:0;}
#wrap{
width:100%;
height:100%;
background:url('images/page-small.jpg') no-repeat;
background-size:cover;
position:fixed;
z-index:-10;
background-position:0 0;
}
</style>
</head>
<body>
<div id="wrap">
</div>
</body>
</html>登入後複製
再來看看頁面效果：
##手機頁面效果
注意：如果去掉div，直接把樣式加在body上面的話，在PC端瀏覽器可以顯示，安卓手機裡面也可以顯示，但是在蘋果手機裡面就無法顯示。多次重複測試，皆重現此bug（如有朋友遇到此類問題的正解，歡迎指教！）
（上圖為蘋果機型下的截圖）
2、透過img標籤加入背景圖
HTML程式碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<title></title>
<style>
*{margin:0; padding:0;}
</style>
</head>
<body>
<div id="wrap">
<img class="imgBcground" src="images/page-small.jpg" alt="">
</div>
</body>
</html>登入後複製
查看頁面效果時發現，圖片是以百分百實際大小呈現，顯然不是我們想要的效果
跟上面的範例很相像，我們只要稍加修改就好
HTML程式碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
<title></title>
<style>
*{margin:0; padding:0;}
.imgBcground{
display:block;
width:100%;
height:100%;
position:fixed;
z-index:-10;
}
</style>
</head>
<body>
<div id="wrap">
<img class="imgBcground" src="images/page-small.jpg" alt="">
</div>
</body>
</html>登入後複製
在不同模擬機型下查看頁面效果均可實現：
#關於background-size屬性，W3C是這麼定義的
#
以上是使用css為未知寬高的元素加入背景圖片方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
