【问题标题】:How using usemap in div background url如何在 div 背景 url 中使用 usemap
【发布时间】:2013-12-03 02:08:01
【问题描述】:

我想你了 你能帮助我吗?我有这样的风格

.lorry{
    background: url(../img/lorry.png);background-repeat:no-repeat;
    _background: none;
    _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/lorry.png');
    height: 143px;
    width: 385px;
    float: left;
    margin: 39px 0 0 0;
}

我想在图片上添加usemap,可以吗?

【问题讨论】:

    标签: html background


    【解决方案1】:

    您不能将图像映射放在背景中。如果您需要此功能,则必须对对象进行分层以实现相同的目的:

    • 第一层:只是您的图像(未绑定到图像映射)
    • 第二层:容器的内容你想出现在 “背景”
    • 第三层:图像的另一个副本绑定到 图像映射,但透明。

    这是一个例子:http://jsfiddle.net/jamietre/fgeee/1/

    以下是实现此效果的一般构造。它的工作原理是在最顶层有一个图像映射(因此它将处于活动状态),但绑定到一个透明图像。您看到的实际图像在所有事物的背后,并且不透明。

    您也可以通过跳过第一个图像并将其作为背景分配给 layer2 div 来对两个图层执行此操作。这仅在您要以其原始分辨率显示图像时才有效,所以可能没问题,但这个答案更通用。

    <div id="wrapper">
        <img id="layer1" src="some/image.jpg">
        <div id="layer2" style="position: absolute; top: 0; left: 0;">
             Your content here
        </div>
        <img id="layer3" 
          style="position: absolute; top: 0; left: 0; opacity:0; *filter: Alpha(opacity=0);" 
          usemap="#your-map" src="some/image.jpg">
    </div>
    

    注意事项:

    • 需要包装器才能进行绝对定位工作
    • *filter: .. css 用于支持不理解不透明度的 IE

    【讨论】:

      【解决方案2】:

      我只是来到这里,因为我也在尝试做同样的事情,我找到了一个使用“地图”而不使用图像的人。

      正如其他人所说,isn't possible use maps 没有图像,但我们可以使用 DIV。

      您所做的是,您在主图像上放置一个 div 并为该 DIV 创建一个链接,下面遵循我的代码:

      HTML

      <div id="progress"> 
         <a id="link1" title="Symbol Link" href="#">Symbol Link</a>
         <a id="link2" title="Stack Link" href="#">Stack Link</a>
         <a id="link3" title="Overflow Link" href="#">Overflow Link</a>
      </div>
      

      CSS

      #progress {
          width: 257px;
          height: 84px;
          background:url(http://upload.wikimedia.org/wikipedia/en/9/95/Stack_Overflow_website_logo.png);
          position:relative;
      }
      a#link1, a#link2, a#link3 {
          display: block;
          overflow: hidden;
          position: absolute;   
          background: transparent;
          text-indent: -9999px; 
      }
      #link1 {
          left: 10px;
          width: 45px;
          height: 84px;
      
      }
      #link2 {
          left: 55px;
          top: 45px;
          width: 70px;
          height: 39px;    
      }
      #link3 {
          top: 45px;
          left: 124px;
          width: 130px;
          height: 39px;    
      }
      

      jsFiddle 我的例子。

      参考:CSS image maps

      【讨论】:

      • 这是一种可行的方法,但前提是您需要矩形区域。这在处理圆形和多边形时是不可能的。
      【解决方案3】:

      不可能在具有背景图像的对象上使用图像映射。 usemap 属性需要一个图像(img 标签)。

      参考:http://www.w3schools.com/tags/att_img_usemap.asp

      【讨论】:

        猜你喜欢
        • 2018-05-16
        • 1970-01-01
        • 2015-07-01
        • 2016-09-11
        • 1970-01-01
        • 2021-06-24
        • 2015-04-19
        • 2021-12-18
        • 1970-01-01
        相关资源
        最近更新 更多