如何讓背景圖片在不同的解析度都滿屏才顯示
本章節分享一段程式碼例項,它實現了再不同的解析度下,背景都是滿屏效果。
程式碼非常的簡單,只需要用到一個css3的background-size:cover即可實現。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin:0px; padding:0px; } body { background-size:cover; background-image:url(demo/CSS/img/girl.jpg) } </style> </head> <body> </body> </html>
上面的程式碼實現了我們的要求,程式碼非常的簡單,具體可以參閱相關閱讀。
background-size可以參閱background-size用法詳解一章節。
相關文章
- win10系統回收站滿和空圖示都顯示滿如何解決Win10
- Win10電腦雙屏顯示器設定不同解析度的方法Win10
- Activity背景顯示app圖示APP
- 直播帶貨原始碼,背景圖片顯示鋪滿但不變形原始碼
- Swift iOS : 裝入webview時,如何讓圖片都顯示在螢幕內SwiftiOSWebView
- 瀏覽器模擬顯示器不同解析度瀏覽器
- 根據不同的顯示器解析度使用不同樣式檔案
- 小程式button背景顯示圖片
- weex踩坑之image圖片在ios/Android不顯示iOSAndroid
- 如何讓圖片在div中垂直水平居中對齊
- 資料視覺化大屏自適應,滿足不同解析度需求視覺化
- Win10家庭版新增windows聚焦功能 登入時能顯示不同鎖屏背景Win10Windows
- javascript如何獲取顯示器的解析度JavaScript
- 如何獲取當前顯示其的解析度
- 妙招:使用Python實現圖片在人臉識別並顯示Python
- 不同size class顯示不同的UIUI
- 簡易處理圖片在div中居中鋪滿
- HTML5 body設定全屏背景圖片 如何讓body的背景圖片自適應整個屏—-實戰經驗HTML
- 關於Spyder在高解析度顯示器下的選單圖示顯示不正確問題
- win10多顯示器可以設定不同的桌面背景嗎Win10
- 如何讓網站在手機和PC上分別顯示不同的聯盟廣告?網站
- html中背景圖按比例縮放全屏顯示HTML
- 圖片設定level-list,根據不同狀態顯示不同圖片
- SAP UI5 裡如何讓每次檢視顯示時都執行某方法UI
- win10藍屏介面不顯示藍屏錯誤資訊怎麼解決_讓Win10藍屏介面顯示藍屏錯誤資訊的步驟Win10
- Win10 1909如何設定多屏顯示_Win10 1909設定多屏顯示圖文步驟Win10
- echarts如何在每個柱狀圖上都顯示氣泡詳解(好看的柱狀圖)Echarts
- jquery實現的背景圖鋪滿全屏效果jQuery
- css如何讓div顯示在最上層CSS
- Qt如何讓彈出的視窗居中顯示QT
- 雙屏顯示設定
- Win10正式版系統下部分資料夾圖示背景顯示黑色如何解決Win10
- 直面屏和曲面屏顯示器哪個好?直面屏和曲面屏電腦顯示器的區別對比
- 顯示對話方塊,同時半透明顯示背景Activity
- win10如何設定桌面顯示圖示_windows10顯示桌面圖示設定方法Win10Windows
- StatusLayout:顯示不同狀態的佈局
- Pock 讓macOS 的App 圖示顯示在Touch Bar 上,讓你快速一指切換MacAPP
- Archlinux配置雙屏顯示Linux