帶圖像的透明盒子（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使其工作。

來源

2010-12-18 nathan

即時通訊還使用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圖像外，效果很好。

來源

2011-07-04 04:34:01 fixer

帶圖像的透明盒子（div） - 按比例調整大小？

回答

相關問題