2

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

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

我的问题：在像 Internet Explorer 这样的浏览器中，'background-size' 属性不起作用。是否有解决方案通过 JavaScript、jQuery 或 CSS 来完成这项工作，而无需在标记中放置物理 <img> 标记？

4

2 回答 2

3

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

.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%;
}
于 2014-03-28T13:26:39.923 回答
1

你可以使用这个 polyfill。也许填补你的问题。添加对背景大小的支持的 IE 行为：封面；和背景大小：包含；到 IE8。

如何使用它？

到处使用 background-size: cover; 或背景尺寸：包含；在您的 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);
}

请参阅此处：背景大小的 polyfill github repo 和更多信息

于 2013-08-26T15:12:54.150 回答