使用css給未知寬高的元素添加背景圖片方法

來源：懂視網責編：小采時間：2020-11-27 18:52:14

使用css給未知寬高的元素添加背景圖片方法

使用css給未知寬高的元素添加背景圖片方法:給頁面的某一元素添加背景圖片，當沒有指定具體的寬高時，是無法顯示效果的1、添加背景圖HTML代碼：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &l

推薦度：

點擊下載本文 文檔為doc格式

導讀使用css給未知寬高的元素添加背景圖片方法:給頁面的某一元素添加背景圖片，當沒有指定具體的寬高時，是無法顯示效果的1、添加背景圖HTML代碼：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &l

給頁面的某一元素添加背景圖片，當沒有指定具體的寬高時，是無法顯示效果的

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>

我們可以看看頁面效果截圖：

使用css給未知寬高的元素添加背景圖片方法

為了達到適應不同終端的屏幕大小，我們又不能把寬高寫死，那怎么辦呢？可以采取以下方法：

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>

再來看看頁面效果：

使用css給未知寬高的元素添加背景圖片方法

手機頁面效果

使用css給未知寬高的元素添加背景圖片方法

注意：如果去掉div，直接把樣式加在body上面的話，在PC端瀏覽器可以顯示，安卓手機里面也可以顯示，但是在蘋果手機里面就無法顯示。多次反復測試，均重現此bug（如有朋友遇到此類問題的正解，歡迎指教！）

使用css給未知寬高的元素添加背景圖片方法

（上圖為蘋果機型下的截圖）

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>

查看頁面效果時發現，圖片是以百分百實際大小呈現，顯然不是我們想要的效果

使用css給未知寬高的元素添加背景圖片方法

跟上面的例子很相像，我們只需要稍加修改就好

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>

在不同模擬機型下查看頁面效果均可以實現：

使用css給未知寬高的元素添加背景圖片方法