首頁 >web前端 >css教學 >使用css為未知寬高的元素加入背景圖片方法

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

高洛峰
高洛峰原創
2017-03-23 11:19:032190瀏覽

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

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" 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為未知寬高的元素加入背景圖片方法

#關於background-size屬性,W3C是這麼定義的

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

以上是使用css為未知寬高的元素加入背景圖片方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn