3

我知道如何为前景图像设置图像映射。但是这次我想为图像的一部分设置图像映射，它被设置为 div 的背景图像。我该怎么做。我在网络，找不到解决方案。请帮助。例如，

在此处输入图像描述

html

<div class="header full" style="background:url('/hdr.jpg';?>) no-repeat; height:492px">

整个图像设置为背景图像，我想单击Nestle椭圆形部分并将被重定向到某个 url。

4

3 回答 3

3

请尝试以下代码
使用您的图像并重命名为test.jpg 请将所有图像放在同一个文件夹中以进行测试并根据您的需要更改代码（这只是一个示例）

**CSS** (style.css)



.image{
   background: url("test.jpg") repeat scroll 0 0 transparent;
   height: 185px;
   width: 266px;
   border: 1px solid;
   }
    .link{
        padding-left: 26px;
        padding-top: 23px;
        position: absolute;
    }
    .link a{
      padding-left: 0;
      display: block;
      height: 48px;
      width: 67px;
    }
    .container{
    position: relative;
    }

HTML

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="link"> <a href="">&nbsp;</a></div>
<div class="image">
</div>
</div>
于 2013-03-04T11:49:37.473 回答
0

这是一个带有解释的示例：http: //quackit.com/html/tutorial/html_image_maps.cfm

于 2013-03-04T11:21:32.703 回答
0

好吧，你把图像作为背景，因为它们现在在 div 中没有这样的元素来点击

如果您只需要图像映射中链接的“矩形”形状，则可以改用 css 定义的链接位置。这是通过指定位置并将背景颜色设置为透明来完成的。这是一个例子

于 2013-03-04T11:51:21.023 回答