在IE8中div的背景图像：设置响应大小和透明度

Why this question should not consider as duplicate: I have read IE 8: background-size fix and How do I make background-size work in IE? however they did not worked in my scenario, it is maybe due to using bootstrap. I want to set a responsive and transparent background for a div.

为什么这个问题不应该被视为重复：我已经阅读了IE 8：后台大小修复以及如何在IE中使后台大小工作？但是他们在我的场景中没有用，可能是因为使用了bootstrap。我想为div设置一个响应和透明的背景。

I am using bootstrap 3.3.6 and I want to display following code in IE8 correctly:

我正在使用bootstrap 3.3.6，我想在IE8中正确显示以下代码：

<head>
    <title>Bootstrap Example</title>    
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="libs/bootstrap-3.3.6-dist/css/bootstrap.min.css">
    <script src="libs/jquery-1.11.2.min.js"></script>
    <script src="libs/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="libs/myCSS/font-face.css">    
    <script src="libs/respond.js"></script>
    <script src="libs/html5shiv.js.js"></script>
    ...
</head>

<body>
    ...
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-6 text-center center">
                <div class="row">
                    <div class="left-finger-picker img-responsive"> //this is my background image
    ...
</body>

left-finger-picker:

左指选择器：

.left-finger-picker {
    width: 200px;
    height: 210px;
    position : relative;
    background-size: cover;     
    background-image : url("../myPics/leftHand.png");
    background-repeat: no-repeat;
    background-size: contain;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../myPics/leftHand.png', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='../myPics/leftHand.png', sizingMethod='scale')";

}

right-finger-picker CSS is like as left-finger-picker except its image src.

右手指拾取器CSS就像左手指拾取器一样，除了它的图像src。

output in chrome, firefox and IE11:

chrome，firefox和IE11输出：

output in IE8:

IE8中的输出：

Another problem is that the background of div is white while I want to be transparent, because the original images are transparent in png format.

另一个问题是div的背景是白色而我想要透明，因为原始图像在png格式中是透明的。

2 个解决方案

#1

I would advise you to use img-tags with width and height settings via css. If the IE8 support is mandatory.

我建议你通过css使用宽度和高度设置的img-tags。如果IE8支持是强制性的。

Please take a look at this w3c page which states that the backgound-size attribute is only supported from IE version 9.

请查看此w3c页面，该页面指出仅从IE 9版本支持backgound-size属性。

#2

Unfortunately, background-size is not supported in IE8. There is a reported workaround here however in my experience this is more trouble than it's worth and this is backed up by the confusion in the comments on that answer.

不幸的是，IE8不支持后台大小。这里有一个报告的解决方法，但是根据我的经验，这比它的价值更麻烦，这可以通过对该答案的评论中的混淆来支持。

Your best bet is to probably just forget about trying to use background-size and instead swap it for a plain old <img>

你最好的选择可能就是忘记尝试使用background-size而是将它换成普通的在IE8中div的背景图像：设置响应大小和透明度

The snippet below exemplifies your issue. There is zero bootstrap and as you can see, you get the desired result in everything* bar IE8 - which is displaying something similar to your screenshot.

下面的代码段举例说明了您的问题。没有引导程序，正如您所看到的，您可以在所有内容中获得所需的结果*吧IE8 - 它显示类似于屏幕截图的内容。

Note - stack overflow snippets don't work in IE8 You will have to copy pasta them and make your own .html files to test this.

注意 - 堆栈溢出片段在IE8中不起作用您必须复制面食并制作您自己的.html文件来测试它。

<style>
    #div1{
      width: 175px;
      height: 75px;
      background-image: url('http://placehold.it/350x150');
      background-size:cover;
    }
</style>


<div id="div1">
</div>

In the linked SO it suggests you use the following:

在链接的SO中，它建议您使用以下内容：

<style>
    #div1{
        width: 175px;
        height: 75px;
        background-image: url('http://placehold.it/350x150');
        background-size:cover;

        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='http://placehold.it/350x150',
        sizingMethod='scale');
   }
</style>
<div id="div1">
</div>

In this case it works! however I assure you that this implementation is a case by case basis.

在这种情况下，它的作品！但我向你保证，这个实施是个案的基础。

My preferred method is just have a simple <img> tag and then wrap this in a parent div to emulate a container.

我首选的方法是只有一个简单的在IE8中div的背景图像：设置响应大小和透明度标签，然后将其包装在父div中以模拟容器。

<style>
    #div1{
        width: 175px;
        height: 75px;
    }
	
    img{
        width: 100%;
        height: auto;
    }
</style>
<div id="div1">
    <img src="http://placehold.it/350x150" />
</div>

If you opt to use the first example of the second, I highly recommend reading into the caveats of using such an implementation. AlphaImageLoader Filter.

如果您选择使用第二个示例，我强烈建议您阅读使用此类实现的警告。 AlphaImageLoader过滤器。

#1