1

私の画像が前面にあり、テキストが背面にあります。後ろのテキストを選択したい。これはクロムとファイアフォックスで動作します。IEでも動作させるにはどうすればよいですか。

<div id="parent-street-view">
    <div id="map_canvas">This is supposed to be visible and selectable</div>
    <img class="overlay-pollution"
    src="http://www.lorempixel.com/400/400" />
</div>​

<style>
@media print {
    .gmnoprint {
        display: none;
    }
}

@media screen {
    .gmnoscreen {
        display: none;
    }
}

#parent-street-view {
    position: relative;
}

#map_canvas {
    position: absolute !important;
    width: 500px;
    height: 400px;
    background-color: rgb(229, 227, 223);
    overflow: hidden;
    -webkit-transform: translateZ(0);
    z-index: 0;
}

#parent-street-view .overlay-pollution {
    width: 500px;
    height: 400px;
    position: absolute;
    z-index: 100;
    opacity: 0.5;
    pointer-events:none;
}​
</style>

http://jsfiddle.net/G5BeU/2/ IE でこれを機能させるにはどうすればよいですか?

4

1 に答える 1

-1

1) - #map_canvas の z-index 値は 0 で、画像 .overlay-pollution の z-index 値は 100 です。これに関する問題は、画像が実際にはテキストの上に配置されているため、IE はそうではありません。これを修正するには、#map_canvas に高い値を指定します。たとえば、#map_canvas - z-index: 101 を指定します。これにより、最初の問題が修正されます。

2) - #map_canvas に高い値を指定すると、#map_canvas の背景色がブロックを塗りつぶし、画像が表示されないため、#map_canvas 背景色に不透明度を指定します - background-color: rgb(229, 227, 223, 0.5);

うまくいけば、これで IE の問題が解決するはずです。

于 2012-12-05T10:39:15.573 に答える