css給未知寬高的元素添加背景圖片-創(chuàng)新互聯(lián)

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

十載的景寧畬族自治網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整景寧畬族自治建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“景寧畬族自治網(wǎng)站設(shè)計”,“景寧畬族自治網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

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('p_w_picpaths/page.jpg') no-repeat center center;
			background-size:cover;
		}
    </style>
</head>
<body>
	<div id="wrap">
	</div>
</body>
</html>

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

css給未知寬高的元素添加背景圖片

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

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('p_w_picpaths/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給未知寬高的元素添加背景圖片

手機(jī)頁面效果

css給未知寬高的元素添加背景圖片

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

css給未知寬高的元素添加背景圖片

（上圖為蘋果機(jī)型下的截圖）

2、通過img標(biāo)簽添加背景圖

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="p_w_picpaths/page-small.jpg" alt="">
	</div>
</body>
</html>

查看頁面效果時發(fā)現(xiàn)，圖片是以百分百實(shí)際大小呈現(xiàn)，顯然不是我們想要的效果

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="p_w_picpaths/page-small.jpg" alt="">
	</div>
</body>
</html>

在不同模擬機(jī)型下查看頁面效果均可以實(shí)現(xiàn)：

css給未知寬高的元素添加背景圖片

關(guān)于background-size屬性，W3C是這么定義的

css給未知寬高的元素添加背景圖片

具體可以查看鏈接：http://www.w3school.com.cn/c***ef/pr_background-size.asp

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證，機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

網(wǎng)頁名稱：css給未知寬高的元素添加背景圖片-創(chuàng)新互聯(lián)
路徑分享：http://muchs.cn/article2/dsjdic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站導(dǎo)航、網(wǎng)頁設(shè)計公司、品牌網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容