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 回答