如何讓背景圖片在不同的解析度都滿屏才顯示
本章節分享一段程式碼例項,它實現了再不同的解析度下,背景都是滿屏效果。
程式碼非常的簡單,只需要用到一個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
- Activity背景顯示app圖示APP
- 【IDL】同時顯示不同解析度影像的方法
- 直播帶貨原始碼,背景圖片顯示鋪滿但不變形原始碼
- weex踩坑之image圖片在ios/Android不顯示iOSAndroid
- 瀏覽器模擬顯示器不同解析度瀏覽器
- 移動端頁面不滿一屏時如何實現滿屏背景?
- 小程式button背景顯示圖片
- 資料視覺化大屏自適應,滿足不同解析度需求視覺化
- 妙招:使用Python實現圖片在人臉識別並顯示Python
- vscode雙屏高效顯示:AI助手和生成內容佔滿副屏,編輯區佔滿主屏VSCodeAI
- 關於Spyder在高解析度顯示器下的選單圖示顯示不正確問題
- Win10 1909如何設定多屏顯示_Win10 1909設定多屏顯示圖文步驟Win10
- HTML5 body設定全屏背景圖片 如何讓body的背景圖片自適應整個屏—-實戰經驗HTML
- 微信小程式背景圖完全覆蓋顯示微信小程式
- SAP UI5 裡如何讓每次檢視顯示時都執行某方法UI
- for迴圈—不同div顯示不同樣式
- win10藍屏介面不顯示藍屏錯誤資訊怎麼解決_讓Win10藍屏介面顯示藍屏錯誤資訊的步驟Win10
- css如何讓div顯示在最上層CSS
- 直面屏和曲面屏顯示器哪個好?直面屏和曲面屏電腦顯示器的區別對比
- 雙屏顯示設定
- win10系統開機鎖屏介面只顯示一張圖片不顯示日期時間如何解決Win10
- win10如何設定桌面顯示圖示_windows10顯示桌面圖示設定方法Win10Windows
- win10系統設定資料夾顯示圖片解析度的方法Win10
- Pock 讓macOS 的App 圖示顯示在Touch Bar 上,讓你快速一指切換MacAPP
- 直播app開發,css讓圖片在a標籤裡垂直居中APPCSS
- 小程式view標籤新增背景圖真機不顯示問題View
- 新增的影像批次調整背景或顯示方法
- 如何不顯示我的電腦、回收站等圖示?
- 如何讓Spring MVC顯示自定義的404 Not Found頁面SpringMVC
- 如何讓 Visual Studio Code 裡顯示 Cypress 的 intelligent code suggestionIntel
- 使用jpeg圖片庫,顯示圖片並簡單實現LCD的觸屏功能
- 直播網站原始碼,CardView如何顯示出底背景樣式?網站原始碼View
- CSS如何讓li 4個一行顯示CSS
- 如何在終端中顯示圖片
- win10 如何設定微信顯示通知和圖示 win10怎麼顯示微信圖示Win10
- win10 工作列居中顯示如何設定_win10怎麼讓工作列圖示居中Win10
- win10雙顯示器如何設定_win10雙屏顯示設定步驟Win10
- 電腦顯示器曲面屏和平面屏哪個好?曲面顯示器和平面顯示器的區別及優缺點對比