新項目 要求兼容到 ie9 及以上，因為 ie9 相對于css 新特性的支持不錯，所以很少遇到需要hack 的屬性。

在登陸頁 添加一個 全屏的背景圖片，div 的設置如下：

.webbox{width: 100%;height:100%;background:transparent url(login_bg.jpg) no-repeat center;background-size: cover; }

然后在chrome和火狐上都是顯示正常的，然而在 ie9 上 卻顯示不出來。這就排除了路徑及寫法的問題。

background 屬性 基本不存在兼容性問題，我在網上搜索了以下，基本遇到這種問題的都是 通過改變 圖片的格式解決的，

但是我把jpg、jpeg、gif、png 幾種格式都試了一遍，依然不顯示，所以也不是 格式的問題。

?

最后發現，當把div 的height 屬性修改為固定的px單位 時，可以顯示。

?

即 單位為 百分比的時候 ，無論值為多少，背景圖片都無法顯示。于是 用下列思路：

body{overflow:hidden\9!important; /*ie8,9 識別的*/ }.webbox{width: 100%;height:100%;height:1000px\9!important; /*ie8,9 識別的*/background:transparent url(login_bg.jpg) no-repeat center;background-size: cover; }

加入 ie9 才能識別的 \9 后綴，以及添加 ！important 后綴變為最大優先級，將其他配置覆蓋。

最后圖片成功出現。

另外ie9 以下 的 div 的 寬度不包含 padding，所以設置padding時，順便設置 box-sizing = border-box; 將寬度包含padding；

轉載于:https://www.cnblogs.com/RoadAspenBK/p/9513122.html

總結

以上是生活随笔為你收集整理的ie9 background 不显示的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。