Question

我正在尝试在视口容器中放置一个超大图像作为背景图像，并在其上显示重复样式。下面的代码适用于Chrome和Firefox，但是当在Internet Explorer中查看它时（在多台计算机上观察到9和11），我会得到某种奇怪的图像撕裂。有人有解决方案吗？

HTML：

<div class="map-layer"></div>

CSS：

.map-layer {
width:4468px;
height:2016px;
background: #000000 url('http://www.thormx.com/wp-content/themes/twentyeleven-child/rvmxgp-micro/images/world-map.png') 1px -1px repeat-x;
}

http://jsfiddle.net/75r8hgdg/1/

注意：当背景x位置设置为0时，撕裂效果会消失，但这会破坏以指定（x，y）开始的目的。

Answer 1

看起来正x位置导致撕裂（非常奇怪，很可能是一个错误）

请改为尝试：

<style>
    .map {
        width:4468px;
        height:2015px;      
        padding-left: 1px;
    }
    .map-layer {
        width:4468px;
        height:2016px;
        background: url('http://www.thormx.com/wp-content/themes/twentyeleven-child/rvmxgp-micro/images/world-map.png') repeat-x #000000;
        background-position: 0 -1px;
    }
</style>

<div class="map">
    <div class="map-layer">
    </div>
</div>

Answer 2

进一步搜索后，我使用的解决方案被引用为另一个问题found here中的解决方法。通过使透明图像的高度和宽度匹配，工件就会消失。

Internet Explorer中的大型重复背景图像

2 个答案: