简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

HTML中讓背景圖片自適應瀏覽器大小

不言
發布： 2018-06-05 15:27:18
原創
6753 人瀏覽過

這篇文章主要介紹了HTML中使背景圖片自適應瀏覽器大小實例詳解的相關資料,需要的朋友可以參考下

HTML中使背景圖片自適應瀏覽器大小實例詳解

解決方法：

#1、圖片不夠大，又 background屬性不能拉伸圖片；


1、圖片不夠大，又 background屬性不能拉伸圖片；

#2、只能用個p，把其z-index值設為負，並使這個p大小為整個body大小，在p裡用 ;

3、 body的background屬性去掉，要不然會被遮住。 

<html> 
<body> 
<p id="Layer1" style="position:absolute; left:0px; top:0px; width:100%; height:100%"> 
<img src="pictures/background.jpg" width="100%" height="100%"/> 
</p> 
</body> 
</html>
登入後複製

如果想讓圖片不跟著瀏覽器右邊滾動條捲動，就用position:fixed屬性。 wordpress建站的達人們也可以用此方法，在指定頁面自訂自己的背景圖片。

感謝閱讀，希望能幫助大家，謝謝大家對本站的支持！ 相關推薦：

Html 實作動態顯示色區塊的報表效果(實例程式碼)

########## ##

以上是HTML中讓背景圖片自適應瀏覽器大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
HTML中使背景图片自适应浏览器大小 HTML背景图片自适应
來源：php.cn
上一篇：js HTML5 canvas繪製圖片的方法 下一篇：JS實作改變HTML上文字顏色和內容的方法
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何刪除 vue 應用程式中神秘的白色區域？ 我正在嘗試使用vue3建立網站並為其設定背景圖片。但有一個神秘的白色區域無法去除。我確信這不是邊距或填充，因為我已將所有邊距和填充設為0，並刪除了所有ml,pl類。我將應用程式組件...
來自於 2023-09-11 21:04:01
0
1
199
網格列在溢出時延遲調整大小 我有一個2×2CSS網格，它使用固定定位填滿瀏覽器視窗。它看起來像這樣：-----------------||xxxxxxxxxxxxx|-----------------|x||...
來自於 2023-09-06 21:25:59
0
1
252
如何使用具有圓角背景的文字覆蓋圖像 我需要在HTML中複製您在此圖像中看到的內容：問題是文字覆蓋了div和背景圖像。如果外部div中沒有圖像並且沒有純色，我可以想像我可以相當輕鬆地使用一些帶有圓角的小html元素放置...
來自於 2023-08-30 15:20:14
0
1
192
css - 桌上型WEB應用自適應問題 盆友在開發一個桌面GUI應用，使用的是NW.js。由於需求方需喲的頁面要求自訂比較多，大量使用提供的圖片作為dom元件背景，當時的大小和佈局都是寫死的。現在需要做桌面上的自適應（不...
來自於 2017-05-02 09:29:40
0
4
480
css - 手机app中rem的基准值计算错误 1.使用html的font-size，然后通过rem设置图片高度 对页面图片的高度进行自适应，在多个手机浏览器和app内测试都没问题，但在华为荣耀i7手机的app中打开宽度会小于于...
來自於 2017-04-17 11:53:05
0
2
502
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！