0

これは実際には2つの部分からなる質問です。したがって、この透明なdiv要素を背景画像の上に浮かせています。必要なのは、ボックス内に画像（リンクとして）を配置することです。しかし、透明ではありません。透明なボックスを持っていますが、ボックス内の画像（リンクとして）もWebブラウザーに比例して拡大縮小したいので、コンテンツを透明にしない方法がわかりません。これまでの私の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の正しい組み合わせを理解することができません。

4

1 に答える 1

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属性を使用します。widthページのフロー内の位置に関してコンテナの を割り当て、imgと.scale widthをに割り当てます100%。

コンテナのサイズを調整して比例させる必要があるかもしれませんが、これはクエリのないソリューションであり、背景が透明な png 画像を縮小する場合を除いてうまく機能します。

于 2011-07-04T04:34:01.920 に答える