Question

为什么这个问题不应该被视为重复：我已经阅读了IE 8: background-size fix和How do I make background-size work in IE?但是它们在我的方案中没有用，可能是因为使用了bootstrap。我想为div设置响应和透明背景。

我正在使用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 {
    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')";

}

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

在chrome，firefox和IE11中输出：

IE8中的

输出：

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

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

0 个答案: