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

最後更新：2017-03-23 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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

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是這麼定義的

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More