Question

我正在研究建筑着色应用程序。由于我对使用SVG图层的IE中的响应性存在问题，我使用多个PNG背景根据用户的选择以不同颜色显示建筑物的不同部分。我正在使用javascript动态添加多个背景图片：

var building_part_bg = new Array();
    var wall_bg    = '';
    var roof_bg    = '';
    var eave_bg    = '';
    var gable_bg   = '';
    var corners_bg = '';
    var frames_bg  = '';
    var building_bg     = 'url(assets/images/1_part_eave_background.png)';

    function setColor(id, building_part)
    {
        id = id.replace(' ', '_');

        switch (building_part) {
            case 'wall':
                wall_bg = 'url(assets/images/eave_1/wall_'+id+'.png), ';
            break;
            case 'roof':
                roof_bg = 'url(assets/images/eave_1/roof_'+id+'.png), ';
            break;
            case 'eave':
                eave_bg = 'url(assets/images/eave_1/eave_'+id+'.png), ';
            break;
            case 'gable':
                gable_bg = 'url(assets/images/eave_1/gable_'+id+'.png), ';
            break;
            case 'corners':
                corners_bg = 'url(assets/images/eave_1/corners_'+id+'.png), ';
            break;
            case 'frames':
                frames_bg = 'url(assets/images/eave_1/frames_'+id+'.png), ';
            break;
        }

        //var all_layers = wall_bg + roof_bg + eave_bg + gable_bg + corners_bg + frames_bg + building_bg;
        var all_layers = frames_bg + corners_bg + gable_bg + eave_bg + roof_bg + wall_bg + building_bg;

        building_part_bg.push('url(assets/images/eave_1/'+building_part+'_'+id+'.png), ');
        for (i=0; i<building_part_bg.length; i++) {
            document.getElementById('building_area').style.backgroundImage = all_layers;
        }
        console.log(all_layers);
        all_layers = '';
    }

这是PHP / HTML（我不会放置所有PHP代码也不会放置HTML输出，因为每个建筑部件都有大量的颜色）：

<div class="row">
            <div class="col-lg-7">
                <div class="building_area_eave_1" id="building_area">
                    <img class="svg_layers" src="<?php echo HTTP_IMAGES_PATH;?>/building_transparent.png" />
                </div>
            </div>
</div>
       <div id="tabbed">
                    <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">
                        <li class="active"><a data-toggle="tab" href="#show_walls">Wall Panel</a></li>
                        <li><a data-toggle="tab" href="#show_roof">Roof Panel</a></li>
                        <li><a data-toggle="tab" href="#show_eave">Eave Trim</a></li>
                        <li><a data-toggle="tab" href="#show_gable">Gable Trim</a></li>
                        <li><a data-toggle="tab" href="#show_corners">Corner Trim</a></li>
                        <li><a data-toggle="tab" href="#show_frames">Framed Opening Trim</a></li>
                        <li><a data-toggle="tab" href="#show_rollup">Rollup Door</a></li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="show_walls">
                            <?php
                            $color_group = array(1=> 'SIGNATURE&#174; 200', 'VALSPAR', 'SIGNATURE&#174; 300');
                            if( isset($colors) && sizeof($colors) > 0 )
                            {
                                for ($i=1; $i<=3; $i++) {
                                    echo '<br /><small>'.$color_group[$i].'</small><br />';
                                    foreach ($colors as $key => $value)
                                    {
                                        if ($i == $value['color_category']) {
                                            switch ($value['color_name']) {
                                                case "Polar White":
                                                    $button_width = 12;
                                                break;
                                                default:
                                                    $button_width = 3;
                                                break;
                                            }
                                            ?>
                                            <div class="col-sm-<?php echo $button_width; ?> nopadding">
                                                <button type="button" class="btn btn-default btn-block" onclick="setColor('<?php echo $value['color_name']; ?>', 'wall')" style="background-color:#<?php echo $value['color_code'] ;?>; color:#ffffff;"><?php echo $value['color_name']; ?></button>
                                            </div>
                                            <?php
                                        }
                                    }
                                    echo '<div style="clear:both"></div><br />';
                                }
                            }
                            ?>
                        </div>
              </div>
</div>

和CSS：

#building_area {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-size:contain;
    background-position:center;
    position: relative;
}

.svg_layers {
    opacity:0;
}

.building_area_eave_1{
    background: url("../images/1_part_eave_background.png") no-repeat;
}

这适用于FF，谷歌浏览器，Safari但不适用于IE（我已经在11.0.9600.17239版本中测试过）。我在我的JS（var all_layers ...）中添加了一个注释行，因为它似乎是IE'失去控制权的部分'。当我从左到右顺序选择颜色时，它在IE中也可以正常工作，但是当以随机顺序或从右到左选择颜色时，IE不会加载选定的背景图像。我花了两天时间才意识到这种行为，我更加困惑为什么它会发生...我在IE中找不到任何其他逻辑，除非有时它点击我点击之前选择的背景（一次性全部）再次一些以前装载的建筑部分。要查看和试用我在线的内容，请查看应用demo。

非常感谢任何建议和帮助。

IE11多个背景图片问题

0 个答案: