带有图像（作为链接）的透明框（div）——按比例调整大小？

Question

这实际上是一个由两部分组成的问题。所以我有这个透明的 div 元素漂浮在背景图像上，我想要的是在框中包含图像（作为链接）。但不透明。我有透明的盒子，但我似乎不知道如何使内容不透明，因为我还希望盒子内的这些图像（作为链接）按比例缩放到网络浏览器。到目前为止，我的 css 是这样的：

#menu
  {
  position:absolute;
  top:13%;
  left:3%;
width:25%;
height:20%;

background-color:#ffffff;

filter:alpha(opacity=60);
opacity:0.6;
-moz-opacity:0.6;
    -khtml-opacity: 0.6;
 }

  #work img
  {
position:absolute;
margin: 2% 29%;

height:33%;

  }



#infocontact img
 {
    position:absolute;
margin: 33% 29%;
height:33%;
   }

   #store img
     {
    position:absolute;
margin: 66% 29%;
height:33%;
  }

我的 html 是这样的，

 <div id="menu">
 <div id="work">
 <img src="work.gif" /> </div>
 <div id="infocontact">
 <img src="info.gif" />
 </div>
 <div id="store">
 <img src="store.gif" /></div>


  </div>

所以我现在拥有的是那些随着浏览器的高度（以及随后的宽度）缩放的 gif 图像。我想做的是让这些图像也随着盒子的比例缩放。因此，如果由于某种原因您将浏览器设置得很小，则图像不会超出较小的透明框。

我知道它一定是可能的，我只是无法找出 css/html 的正确组合来使其工作。

Answer 1

CSS：

.pic1
{
    position:absolute;
    width:10%;
    thisistheexactwidthofitscontaineralwaysinpercentmax-width:110px;
}

img.scaled,.scaled
{
    width:100%;
}

HTML：

<div class="pic1"><img class="scaled" src="images/yourpic.png" alt="" title="">
</div>

为图像指定比其容器更高的 zindex 并将链接应用于图像，而不是容器。

另外，对于可缩放图像，请使用 width 属性。根据容器在页面流程中的位置指定容器的宽度，以及img 和.scale width< /code> 到 100%。

您可能需要调整容器的大小才能使其成比例，但它是一个免查询的解决方案，除了缩小具有透明背景的 png 图像之外，效果良好。