使用css為未知寬高的元素加入背景圖片方法-css教學-PHP中文網

首頁

web前端

css教學

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

高洛峰

Mar 23, 2017 am 11:19 AM

css

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

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(&#39;images/page.jpg&#39;) 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(&#39;images/page-small.jpg&#39;) 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 lazy"  src="/static/imghwm/default1.png"  data-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 lazy"  src="/static/imghwm/default1.png"  data-src="images/page-small.jpg"    alt="">
    </div>
</body>
</html>

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

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