Прозрачная коробка (div) с изображениями (как ссылки) - пропорционально изменяемый размер? - PullRequest
Новая
       51

Прозрачная коробка (div) с изображениями (как ссылки) - пропорционально изменяемый размер?

0 голосов
/ 18 декабря 2010

Это на самом деле вопрос из двух частей. поэтому у меня есть этот прозрачный элемент 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, чтобы она работала.

1 Ответ

1 голос
/ 04 июля 2011

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 с прозрачным фоном.

...