这实际上是一个由两部分组成的问题。所以我有这个透明的 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 的正确组合。
最佳答案
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
和 .scale
width
到 100%
。
您可能需要调整容器的大小才能使其成比例,但这是一个无查询的解决方案,并且除了缩小具有透明背景的 png 图像外效果很好。
关于css - 带有图像(作为链接)的透明框(div)——可按比例调整大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4475903/