Уменьшение непрозрачности в div без уменьшения непрозрачности содержимого - PullRequest
Новая
       12

Уменьшение непрозрачности в div без уменьшения непрозрачности содержимого

4 голосов
/ 28 мая 2010

Хотите уменьшить непрозрачность фона контейнера содержимого страницы, не уменьшая непрозрачность содержимого. 

<div id="container">
   <div id="page contents">
   page contents goes here, like amazing articles and all that.
   </div>
</div>

Нужно иметь возможность расширяться с содержимым, поэтому не может иметь фиксированную высоту.

Абсолютное позиционирование его под контентом будет означать, что между этими двумя элементами не будет никакой взаимосвязи, и оно не будет расширяться вместе с контентом, поэтому я думаю, что это тупик, не стесняйтесь говорить иначе.

Не могу использовать Jquery, так как он может быть слишком медленным и не мгновенным. Другие варианты предпочтительнее, пожалуйста.

Возможно, придется использовать фоновые изображения «png», но мы надеемся, что нет, так как это шаблон, который должен иметь возможность менять цвет в зависимости от цветовой схемы.

Может генерировать изображения по запросу, но не идеально.

Да, и в довершение всего не могу использовать CSS3, так как он не работает в IE! конечно!

Есть предложения?

Ответы [ 3 ]

4 голосов
/ 28 мая 2010

Мой первый импульс - прозрачный PNG.

Но если посмотреть дальше и особенно с вашими комментариями по изменяющимся цветовым схемам, возможно, вам подойдет подключение к поддержке RGBA. Здесь есть хороший пост (в том числе о том, как взломать IE - который вообще его не поддерживает):

http://css -tricks.com / RGBA-браузер Поддержка /

1 голос
/ 28 мая 2010

Все содержимое элемента получит значение непрозрачности, даже если вы установите непрозрачность содержимого в 0, у вас все еще будет проблема ... вот простое решение, которое я использую:

HTML 

<div id="menu_bg"></div> <!-- BG FOR LEFT MENU -->
<div id="menu_header">
  <span class="menu_title2">MENU PRINCIPAL</span>
  <div id="menu_opts">
    <ul id="menu">
      <li id="menu_home"><a href="#">HomePage</a></li>
      <li id="menu_home"><a href="#">Company</a></li>
    </ul>
  </div>
</div>

CSS: 

div#menu_bg {
  position:fixed; top:10px; left:10px; z-index:20000;
  width:200px; height:50px;
  background:#000000;
  /* for IE */ filter:alpha(opacity=60);
  /*CSS3 standard*/ opacity:0.6;
}
div#menu_header {
  position:fixed; top:10px; left:10px; z-index:20001;
  width:200px; height:50px; overflow:hidden; cursor:pointer;
}
div#menu_opts {
  position:absolute; top:60px; left:10px;
  width:200px; height:275px; overflow:hidden;
}

Хитрость проста: за вашим контентом стоит div, а для его размещения используйте позицию и z-index. Затем нарисуйте еще один div с содержимым поверх последнего и используйте ту же позицию, но установите z-index выше. Таким образом, у вас будет фон с желаемой непрозрачностью, и ваш контент, так как он находится на другом div, получится очень правильным!

1 голос
/ 28 мая 2010

еще не проверено, но вы поняли. 

<div id="container">
   <div id="page contents">
   <div id="opacity"></div>
   page contents goes here, like amazing articles and all that.
   </div>
</div>

#page {
   position:relative;
}

#opacity {
   position:absolute; z-index:-1; height:100%; width:100%; background-color:#eee; opacity:.7;
}
...