兩種背景圖片不重複的鋪滿網頁螢幕的方法對比（HTML/JSP）

阿新 • • 發佈：2019-02-16

前端佈局入門中，基本上都逃不過平鋪背景圖片的問題，下面就介紹幾種圖片不重複鋪滿螢幕的方法。

方法一：

背景圖片寬高拉伸至與瀏覽器頁面一致

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三歲的HTML</title>
    <style type="text/css">
        #img {  
        z-index:-1;  /*使背景圖片置底顯示*/
        position 
:absolute;/*將背景圖片設定成 absolute（絕對定位），使其顯示於文件流之下，不佔有文件流空間*/  
        width:100%;  
        height:100%;  
}  
    </style>
</head>
<body scroll = no>  <!-- 圖片不隨滾動條滾動 -->
    <img alt = "圖片無法載入" src="pic.jpg" id="img">
    <p><abbr title = "World Health Organization" style 
 = "color:white">WHO</abbr> 成立於 1948 年。</p>
</body>
</html>

方法二：

背景圖片按比例縮放，平鋪瀏覽器頁面

縮放比例為圖片寬度：瀏覽器寬度

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三歲的HTML</title>
    <style type="text/css">
        body 
{      
        background-image: url(pic.jpg);      
        background-size:cover;    
     } 
    </style>
</head>
<body scroll = no>  <!-- 圖片不隨滾動條滾動 -->
    <img alt = "圖片無法載入" src="pic.jpg" id="img">
    <p><abbr title = "World Health Organization" style = "color:white">WHO</abbr> 成立於 1948 年。</p>
</body>
</html>

兩種方法的對比

方法一：若圖片寬高比與瀏覽器不一致，會因強行拉伸導致圖片形變

方法二：按比例縮放，圖片完美顯示

兩種背景圖片不重複的鋪滿網頁螢幕的方法對比（HTML/JSP）

前端佈局入門中，基本上都逃不過平鋪背景圖片的問題，下面就介紹幾種圖片不重複鋪滿螢幕的方法。方法一：背景圖片寬高拉伸至與瀏覽器頁面一致 <!DOCTYPE HTML> &

css背景圖片全屏鋪滿自適應

background-image: url('images/bg.jpg'); &n

用css3實現頁面背景圖片不重複

也許許多人在做網頁的時候都會遇到過一個這樣的問題，什麼問題呢那就是跟下面這張圖片一樣的問題出現這樣的問題的原因是因為div的大小大於背景圖片的大小，從而導致了背景圖片的重複，其實在css3中解決像這樣的問題特別簡單隻需要新增一個這樣的樣式即可 background

利用css將背景圖片鋪滿整個螢幕

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; c

wallpaper 圖片小不能鋪滿桌面

當用戶自定義桌布的時候，如果採用了解析度比較小的圖片，就會導致鋪不滿螢幕，會留下黑影解決思路：根據平板的解析度進行適應，如果圖片的解析度符合顯示的解析度則不做處理，否則將圖片進行相應的拉伸關鍵點檔案：/data/system/wallpaper_info.xml 每次更

android button背景圖片不拉伸的一種處理方法

一般來說UI給的圖片比例應該和控制元件是正好符合的，但是實際操作過程中會發現可能不符合的情況，比例不對直接設定background的話background會被拉伸，這個時候一般來說如果能像ImageView一樣設定scaleType為centerCrop或者center就好了

CSS網頁背景圖片等比例占滿整個頁面的解決方案

100% 放大縮小所有功能 cnblogs 高度圖片版本 class 想做一個個人展示類的網站首頁，用整張圖片來當背景，瀏覽器窗口放大縮小時背景圖片不會變形，需要用到分層來實現其他功能，就用DIV來實現了 #bodycontainer { width:10

extjs中新建窗體時，給窗體添加背景圖片不顯示問題之一

解決辦法 log 管理背景原因 fit ack 去掉客戶 1、在extjs中新建窗體時，給窗體添加背景圖片不顯示，例如下面的代碼。不顯示的原因：因為設置了 layout: ‘fit‘, Ext.create(‘Ext.Window‘, {

VM虛擬機顯示不能鋪滿問題

使用 size 虛擬生效顯示操作需求虛擬系統設置關於使用虛擬機（VMware）時桌面顯示不能鋪滿整個窗口時的設置操作：步驟：虛擬機菜單下的：編輯-->首選項-->顯示（如下圖）可以根據自己需求設置全屏下面的三個選項，確定後如果不能馬上生效，重啟

小程式背景圖鋪滿整個螢幕

vxml: <view style='width:100%;min-height:100%;background-image:url("/images/tlbc_bg.png");background-size:100% 100%;'> 123 </view>

css 背景圖鋪滿整個螢幕無滾動條

kk總結了兩種方式實現背景圖鋪滿整個螢幕並且無滾動出現的方式，下面來一一介紹：方法一：先上個效果圖 html頁面：一個用來放背景圖的容器.bg <body> <div class="main"> <div class="b

python 在一張圖片不同取樣，儲存圖片不重複

介紹兩種方法，數學方法和過程處理數學方法，在具體實現種發現不能採用時間戳，所以採用均勻分佈，實現如下： r = random.uniform(0, 10000) img_name = str(int(r * 1e+5)) + ".jpg" 多次取隨機數疊加，實現如下： r1 = r

背景圖自適應鋪滿視窗

背景圖自適應缺點：當視窗拉伸縮小時，會失去效果！自己試一下就知道了。直接上程式碼這是html頁面 <body id="body"> ... </body> css檔案如下： #body{

vlc for android 不能全屏，或者畫面不能鋪滿的問題。

做視訊開發的時候，肯定會遇到，小視窗播放，然後支援全屏播放。我遇到的問題，有兩個。一：小視窗視訊有黑邊。就是還是沒充滿。二：全屏畫面也是鋪不滿，而且跟小視窗的畫面大小是一樣的。要解決這些問題，先介紹一下要用到的vlc的三個介面 vide

蘋果手機各種相容性問題：滑動，背景圖片不顯示，input 禁止非數字輸入，position定位，隱藏input游標等

每次做移動端專案，到了提測階段最讓我忐忑的還是測試的各種版本的IOS手機，尤其是那隻蘋果se系統版本賊低的神機。蘋果手機 overflow-y: auto 滑動不了或者滑動卡的問題 -webkit-overflow-scrolling: tou

kafka 指定partition兩種方式&Consumer不消費訊息的幾個原因

需求 1.隨機生成IP數字，將奇數、偶數資料分在不同的Partition 2.通過KafkaAPI實現一個消費組中多消費者，為了是驗證同組的不同消費者是否一一對應不同的Patition 3.打包部署在Linux中執行解決辦法方法1：在pro

VUE專案打包（解決背景圖片不顯示問題）

vue專案打包改變路徑配置將絕對路徑改為相對路徑目標檔案：專案目錄 > config資料夾 > index.js assetsPublicPath:'/' 改為：assetsPublicPath:'./' （加一個點變

微信小程式背景圖片不顯示

1.寫在 wxss 中的background-image 不顯示。 2.<navigator url='' style='background-image:url(../../images/bj.png);background-siz

簡單解決RecyclerView巢狀的RecyclerView條目顯示不全和寬度不能鋪滿

第一個RecyclerView的Adapter @Override public MyHolder onCreateViewHolder(ViewGroup parent, int viewT

Typora護眼綠和夜色兩種背景

最近在使用有道雲筆記，但是有道的markdown背景色不好修改，看到了Typora這工具，用的人還是蠻多了。就試了了，真不錯，蠻好用的。我基本都是使用Typora寫好md檔案後，然後上傳到有道雲上。有道雲筆記背景色修改 1、說明根據個人喜好。設定了兩

兩種背景圖片不重複的鋪滿網頁螢幕的方法對比（HTML/JSP）

方法一：

背景圖片寬高拉伸至與瀏覽器頁面一致

方法二：

背景圖片按比例縮放，平鋪瀏覽器頁面

兩種方法的對比

方法一：若圖片寬高比與瀏覽器不一致，會因強行拉伸導致圖片形變

方法二：按比例縮放，圖片完美顯示

相關推薦