在寫主題樣式的時候經常會碰到用背景圖鋪滿整個背景的需求，這里分享下使用方法
需要的效果
- 圖片以背景的形式鋪滿整個螢屏，不留空白區域
- 保持影像的縱橫比（圖片不變形）
- 圖片居中
- 不出現滾動條
- 多瀏覽器支持
以圖片bg.jpg為例
最簡單，最高效的方法 CSS3.0
歸功于css3.0新增的一個屬性background-size，可以簡單的實作這個效果，這里用fixed和center定位背景圖，然后用background-size來使圖片鋪滿，具體css如下
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
適用于以下瀏覽器
- Safari 3+
- Chrome
- IE 9+
- Opera 10+ (Opera 9.5 支持background-size屬性 但是不支持cover)
- Firefox 3.6+
低版本瀏覽器不支持 ，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/118241.html
標籤：Html/Css
上一篇：前端之html
下一篇：vue中添加與洗掉，關鍵字搜索