Question

我需要一个响应式背景图像，其中一个覆盖按钮位于图像的左下角（覆盖按钮现在是灰色的，用于测试，但是不可见并用作可点击的链接区域）。在调整大小时，此按钮需要与图像一起移动。

我试图通过提供一个响应式div＆＃39;容器来做到这一点。背景图片和容器内的按钮。

响应式背景图像表现完美。我的灰色按钮是用CSS％制作的，并且响应迅速。但是，按钮粘贴在容器div左侧的浏览器窗口INSTEAD的左侧（我想要的地方）。

我知道这是因为我把它设置为左：0，但我认为它会留下：父容器div的0（图像）。

任何人都可以建议如何设置按钮定位，使其相对于容器div？或者还有另一种方式吗？

这里的工作示例：http://jsfiddle.net/DigitalDesign/sQ63a/1/

非常感谢提前！

<!doctype html>
<html>
<head>
  <title>Responsive positioning example</title>

<style type="text/css">

/* set doc as high as viewport */
html, body {padding:0; margin:0; width:100%; height:100%;}

/* background */
.container {
min-height:100%;
background: #bdecff url(abstract-bg2.jpg) top center no-repeat; background-size: contain; 
    /* imageMap responds to this*/
    width: auto;
    height: 100%;}

/*make imageMap container relative to outer container*/ 
.imageMap           {height:100%; position:relative;}

.imageMap .link     {width:100%;
                    height:100%;
                     position:absolute;
                    left:0;
                    top:0;
                    visibility: visible;}

.imageMap a         {display:block;
                    position:absolute;
                    background:#3b3b3b;
                    z-index:100;
                    opacity:0.2;
                    filter:alpha(opacity=20);
                    border:none;
                    outline:none;}

.imageMap:hover .link {visibility:visible;}

.imageMap .link div:hover a {background:#000;
                    z-index:100;
                    opacity:0.1;
                    filter:alpha(opacity=10);
                    border:none;
                    outline:none;}

/* Left side bottom button */
.imageMap a.weblink     {left:0%; top:78%; width:12%; height:10%;}

/*Right side button*/
.imageMap a.emaillink   {left:87%; top:31%; width:13%; height:6%;}

</style>
</head>
<body>
  <div class="container">
    <div class="imageMap">

        <div class="link">
          <!--bottom page button-->
          <div><a href="page2.html" class="weblink" target="_blank"></a></div>
          <div><a href="mailto:#" class="emaillink" target="_blank"></a></div>
        </div>

   </div><!--end imageMap-->       
 </div><!--container-->
</body>
</html>

Answer 1

Demo

**）改变宽度＆amp;你想要的高度，并确保imageMap获得你想成为其他人的亲戚的宽度项目..

我删除背景图像，然后像这样设置正常图像

  <body>
<div class="container">
  <div class="imageMap">
      <img src="http://i61.tinypic.com/24qnyix.jpg" style="width: 100%;height: 100%;max-width: 300px;max-height: 300px;"/>          
        <div class="link">
          <!--bottom page button-->
          <div><a href="page2.html" class="weblink" target="_blank"></a></div>
          <div><a href="mailto:#" class="emaillink" target="_blank"></a></div>
        </div>

  </div><!--end imageMap-->

</div><!--container-->

和css一样

/* set doc as high as viewport */
html, body {padding:0; margin:0; width:100%; height:100%;}

/* background */
.container {
            min-height:100%;

            background-size: contain; 
            /* imageMap responds to this*/
            width: auto;
            height: 100%;}

/*make imageMap container relative to outer container*/ 
.imageMap               {height:100%; position:relative;max-width: 300px;width: 100%
height: 100%;
max-height: 300px;

}

.imageMap .link         {width:100%;
                        height:100%;
                        position:absolute;
                        left:0;
                        top:0;
                        visibility: visible;}

.imageMap a             {display:block;
                        position:absolute;
                        background:#3b3b3b;
                        z-index:100;
                        opacity:0.2;
                        filter:alpha(opacity=20);
                        border:none;
                        outline:none;
                        }

.imageMap:hover .link {visibility:visible;}

.imageMap .link div:hover a {background:#000;
                        z-index:100;
                        opacity:0.1;
                        filter:alpha(opacity=10);
                        border:none;
                        outline:none;}

/* Left bottom button */
.imageMap a.weblink     {left:0%; top:78%; width:12%; height:10%;}

/*Right bottom button*/
.imageMap a.emaillink       {left:87%; top:31%; width:13%; height:6%;}

CSS - 内部div不会留在外部div容器内

1 个答案: