怎樣使背景圖片占據整個屏幕?

来源:http://www.cnblogs.com/shouce/archive/2016/02/24/5211740.html
-Advertisement-
Play Games

有幾種方法:①CSS處理方法(僅IE) #backGroundImg { background-image: url("X.png"); background-repeat: no-repeat; filter:progid:dximagetransform.microsoft.alphaimage


有幾種方法:

①CSS處理方法(僅IE)

#backGroundImg {
  background-image: url("X.png");
  background-repeat: no-repeat;
  filter:progid:dximagetransform.microsoft.alphaimageloader(src='X.png', sizingmethod='scale');/*加上這個,詳細可Google*/
}

 

②把背景圖片做的足夠大;
一般情況下,我們設計給我的圖都是1440*900的極限,然後居中顯示就會適應大部分的屏幕了。可是現在顯示器越來越大,加上Mac下Retina屏超高解析度的虐待...當解析度超過背景圖大小時,邊上就會變成背景色了。
所以最直觀的方法就是將背景圖的大小,翻倍,翻倍,再翻倍....只要超過主流瀏覽器最大解析度就好了。
不過弊端很明顯,過大的圖片會極大的影響網頁的載入速度。

③用Js/jQuery控制大小(這其實是種假象的背景自適應)
利用加入個<img>標簽,將z-index設置的低一些,然後用Js/jQuery監視視窗大小,然後改變圖片的長寬就好了。(詳細Google)
不過,這種方法,當圖片被拉伸或壓縮的過於嚴重的時候會非常可怕的.....
而且,如果屏蔽右鍵功能會很蛋疼;不屏蔽右鍵功能就露怯了。

④利用<img>元素自適應。
這個其實和③差不多,如果是整個網頁的背景,在起始<body>後馬上加上<img>然後將CSS設置
width:100%;
height:100%;
這樣,圖片就會隨著瀏覽器的放大縮小自動縮放了。弊端也和③差不多。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 博友沉沉-_-的這篇express 框架之session分析的已經非常詳細了,本人這裡就不描述了。 總結其中的幾個關鍵點。 1.http協議規定http鏈接是無狀態的鏈接,cookie和session的出現就是為了讓伺服器能識別客戶端請求的連接狀態(通過讀取他們的值來識別)。 2.session的實
  • table中,td單元格無法顯示下全部內容,需要在滑鼠hover時顯示全部內容。 正常顯示樣式: 滑鼠hover時: html: <td>displayAddress<span class="tdtip">popAddress</span></td> css: td{ position:relati
  • 原文地址:http://www.manongjc.com/article/291.html 在一個網頁中多處使用了表格table標簽,這個時候給指定的表格對象設置樣式依然可以通過CSS進行控制設置。其實有時我們這樣思考將table標簽當作DIV標簽來佈局設置CSS,就變得簡單多了。 對table設置
  • 這篇文章主要介紹了js實現密碼強度檢測的相關實例,第一個例子給出了全部代碼,可以直接運行,第二個例子只給出了js代碼,感興趣的碼農可以自己完成第二個實例。 第一個實例 這段JavaScript代碼比較實用,它完成用戶註冊時判斷用戶輸入密碼的強度,分強、弱、中三等級,它可以根據用戶輸入的密碼顯示對應的
  • 1.獲取當前時間 function getNowTime() { return new Date(); } 2.時間與天數相加 function getTimeAddDays(time, days) { return new Date(time.getTime() + days * 24 * 60
  • <!DOCTYPE html> <!--[if IE]> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <![endif]--> <!--[if IE 7]> <meta http-equiv="X-UA-Compatible" conte
  • jQuery獲取Select選擇的Text和Value: 語法解釋: 1. $("#select_id").change(function(){//code...}); //為Select添加事件,當選擇其中一項時觸發 2. var checkText=$("#select_id").find("o
  • //get base URL var _urlstr = window.location.href; if (_urlstr.indexOf("?") > -1) { _urlstr = _urlstr.substring(0, _urlstr.lastIndexOf("?")); } _urlst
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...