Question

我有一个使用此css的元素：

.my-box {
padding-left:50px;
background-image:url('images/img01.png');
background-size:20px;
height:20px;
}

我的问题：在像Internet Explorer这样的浏览器中，'background-size'属性不起作用。有没有一个解决方案可以通过JavaScript，jQuery或CSS来完成这项工作而无需放置物理＆lt; img＆gt;标记中的标记？

Answer 1

背景将填充选择器而不缩放

.background-size-cover {
  background: url('+$image_path+') no-repeat center top; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+$image_path+", sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+$image_path+", sizingMethod='scale')";
}

背景将调整（缩放）到完整选择器高度

.background-size-full-height {
  background: url('+$image_path+') no-repeat center top;
  -webkit-background-size: auto 100%;
  -moz-background-size: auto 100%;
  -o-background-size: auto 100%;
  background-size: auto 100%;
}

Answer 2

您可以使用此polyfill。也许填写你的问题。添加对background-size支持的IE行为：cover;和背景大小：包含;到IE8。

如何使用？

你在任何地方使用背景大小：封面;或背景大小：包含;在CSS中，添加对此文件的引用。 backgroundsize.min.htc

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

见这里：background-size polyfill github repo and further information

CSS'background-size'属性 - 跨浏览器解决方案？

2 个答案: