带图像的透明盒子（div） - 按比例调整大小？

问题描述：

这实际上是一个两部分问题。所以我有这个透明的div元素漂浮在背景图片上，我想要的是在图片框中添加图片（作为链接）。但不透明。我有透明盒子，但我似乎无法弄清楚如何使内容不透明，因为我还希望盒子中的图像（作为链接）按比例缩放到网络浏览器。我的CSS到目前为止是这样的：带图像的透明盒子（div） - 按比例调整大小？

#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使其工作。

即时通讯还使用jquery几个JavaScript函数，如果这有助于..信息明智 – nathan 2010-12-18 00:50:01

答

的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属性。指定容器的width相对于其在页面流中的位置，以及img和.scalewidth至100%。

您可能需要使用容器的大小才能使其成比例，但这是一个免费的查询解决方案，除了使用透明背景缩小png图像外，效果很好。

带图像的透明盒子（div） - 按比例调整大小？

相关推荐