CSS热点与中心问题

• Z时代
• 2024-01-10
• 分类：问答

我在创建网站的过程中遇到了一个问题，我不知道如何解决，在网站上有一个中心有热点的矩形图片，我已经使用了下面的CSS代码 -CSS热点与中心问题

#image_map 
    { 
     display: block; margin-left: auto; margin-right: auto; 
     width:302px; 
     height:65px; 
     background:url(Images/ManordLogo.png) no-repeat; 
     position:relative; 
     } 
     #image_map a 
     { 
      display:block; 
      position:absolute; 
      } 
      #image_map a#link1 
      { 
       width:42px; 
       height:49px; 
       top:11%; 
       left:43%; 
       } 

第一行图像居中并允许扩展能够在页面上，下面的代码定义和创建热点。一切工作正常，热点&图像仍然处于正确的位置，但在设计方面，我需要比它在页面顶部的当前位置低约20px的图像。 每次我尝试使用边距或填充或任何形式的定位图像跳转到页面的右上角，我不知道为什么。

我需要的图像和热点保持不变，热点的位置，以保持相对不管浏览器窗口大小，但对于设计我需要的图像由20像素

我在哪里向下移动我错了，我怎么能做到这一点？

编辑 - 我已经创建了JsFiddle版本，所以你可以看到我的意思，黑色代表整个图像，水色代表热点，我需要整个块（黑色和水色）向下移动20个像素仍然保持居中和可扩展性。

链接的jsfiddle - http://jsfiddle.net/cT3Eu/

谢谢。

回答：

以上是 CSS热点与中心问题 的全部内容， 来源链接： utcz.com/qa/266285.html