html背景圖片自適應瀏覽器
在網頁中設定背景圖片最簡單的是直接設定圖片顯示的畫素大小,但是肯定不能滿足瀏覽的縮放顯示的。
<img src="path" width=200px>
後面在網上查到一種辦法
<div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
<img src="pictures/background.jpg" height="100%" width="100%"/>
利用z-index =-1 把圖片放到最後一層,防止文字被圖片覆蓋,在利用圖片的等比例拉伸去適應瀏覽器顯示畫素的變化。但是在實際的始終中還是有問題:
1.邊緣還是有白邊
2.存在沒有一直圖片拉伸,而將圖片重複了一次的情況。
最後採用了style 中position為fixed反而好了。
<div id="Layer1" style="position:fixed; width:100%; height:100%; z-index:-1">
<img src="pictures/background.jpg" height="100%" width="100%"/>
後面為了不再每次都直接複製js程式碼,就在css 中定義樣式
bg{
positiong:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index=-1;
}
bg>img{
height:100%;
width:100%;
border:0;
}
在程式碼中呼叫:
<div id="bg"><img src='path'></div>
相關文章
- 場景對瀏覽器的自適應瀏覽器
- HTML5 body設定全屏背景圖片 如何讓body的背景圖片自適應整個屏—-實戰經驗HTML
- JXImageBrowser (圖片瀏覽器)瀏覽器
- iOS圖片瀏覽器 - XLPhotoBrowser(類似微信多圖片瀏覽效果)iOS瀏覽器
- CSS實現背景圖片固定寬高比自適應調整CSS
- UITableViewCell自適應圖片高度UIView
- 安卓瀏覽器看背景圖片有些裝置會模糊解決方案安卓瀏覽器
- iSee Pro for Mac圖片瀏覽器Mac瀏覽器
- GraphicConverter for Mac(圖片瀏覽器)Mac瀏覽器
- 幻燈片式圖片瀏覽器瀏覽器
- 一起擼個朋友圈吧 - 圖片瀏覽(中)【圖片瀏覽器】瀏覽器
- 相容所有瀏覽器長寬自適應元素垂直水平居中瀏覽器
- 最新Iframe全瀏覽器相容自適應高度解決方案瀏覽器
- 高效圖片瀏覽器:Pixea Plus for Mac瀏覽器Mac
- GKPhotoBrowser--自定義圖片瀏覽器瀏覽器
- 圖片瀏覽器--學習筆記瀏覽器筆記
- 短視訊直播系統,個人主頁背景圖片自適應寬高
- css控制圖片不變形,圖片自動適應CSS
- bootstrap的圖片自適應屬性boot
- 瀏覽器 Web 訪問剪下板圖片瀏覽器Web
- FotoTime Mac(圖片瀏覽管理器)Mac
- 如何實現一個圖片瀏覽器瀏覽器
- html+css 設定背景圖片HTMLCSS
- chrome瀏覽器不能顯示本地圖片辦法解決(圖片預覽)Chrome瀏覽器地圖
- win10自帶瀏覽器怎麼截圖_win10自帶瀏覽器如何截圖Win10瀏覽器
- CSS實現圖片寬度自適應CSS
- jQuery實現圖片尺寸自適應效果jQuery
- html input type=file 選擇圖片,圖片預覽 純html js實現圖片預覽HTMLJS
- CSS相容各瀏覽器最小高度且能夠自適應程式碼CSS瀏覽器
- asp.net 呼叫echarts顯示圖表控制元件隨瀏覽器自適應解決方案ASP.NETEcharts控制元件瀏覽器
- 瀏覽器更新HTTP伺服器圖片並顯示瀏覽器HTTP伺服器
- 相容所有瀏覽器的圖片上傳本地預覽效果瀏覽器
- ApolloOne for mac(圖片瀏覽工具)Mac
- Swift 3 圖片瀏覽工具Swift
- ABase ImageBrowserActivity之圖片瀏覽
- html iframe高度自適應HTML
- 圖片尺寸大小自適應程式碼例項
- 【轉】超寬的banner條自適應瀏覽器大小始終居中的方法瀏覽器