1

前面に画像、背面にテキストがあります。画像を前面に置いたままテキストを選択できるようにしたい。どうすればこれを達成できますか？jsfiddleへのリンクはhttp://jsfiddle.net/G5BeU/です。

サンプルコード

<html><head><style type="text/css">@media print {  .gmnoprint {    display:none  }}@media screen {  .gmnoscreen {    display:none  }}</style>
    <title>Google Maps JavaScript API v3 Example: Custom StreetView</title>
    <meta charset="utf-8">
<style>
#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; }
</style>
  </head>
  <body>
    <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.mickeys.net/assets/images/default/transparent.png" />
    </div>

    <!--<canvas id="canvas" width="500px" height="500px" style="position:absolute;top:500px;"></canvas>-->
</body></html>
4

2 に答える 2

6

簡単です。pointer-events画像のCSSプロパティをに設定しnoneます。これにより、後ろのテキストを選択できるようになります。

また、画像の不透明度を下げて、テキストを部分的に表示することもできます。

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

これがデモンストレーションです：http：//jsfiddle.net/G5BeU/2/

于 2012-11-30T15:24:39.497 に答える
3

このコードを使用してください。

<html><head><style type="text/css">@media print {  .gmnoprint {    display:none  }}@media screen {  .gmnoscreen {    display:none  }}</style>
    <title>Google Maps JavaScript API v3 Example: Custom StreetView</title>
    <meta charset="utf-8">
<style>
#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; }

.overlay-pollution:hover + #map_canvas , #map_canvas:hover
{
    z-index: 1000;
}

</style>
  </head>
  <body>
    <div id="parent-street-view">
        <img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
        <div id="map_canvas" >This is supposed to be visible and selectable</div>
    </div>

    <!--<canvas id="canvas" width="500px" height="500px" style="position:absolute;top:500px;"></canvas>-->
</body></html>

ノート ：

スタイルを追加

.overlay-pollution:hover + #map_canvas , #map_canvas:hover
{
    z-index: 1000;
}

HTMLコードタグの変更場所

<img class="overlay-pollution" src="http://www.mickeys.net/assets/images/default/transparent.png" />
<div id="map_canvas" >This is supposed to be visible and selectable</div>

http://jsfiddle.net/Ct2X8/1でこの例を参照してください

于 2012-11-30T16:27:07.987 に答える