opacity или прозрачность

web_smile · 27.09.2011, 18:19

Проблема вот в чем: нужно сделать страницу с красивым фоном и 3 полупрозрачными блоками.
Резиновый фон и сами блоки я сделал, но столкнулся со следующей проблемой, при использовании стиля "opacity" применяя что к слоям что к таблицам все изображения находящиеся в блоке тоже обретают туже прозрачность.
Подскажите как сделать так чтобы блок был прозрачным а картинки в блоке оставались нормальными. Вариант делать через графику фон сразу с блоками не катит. Вот собственно упрощенный код страницы:

index.php

Код:

<html>
<head>
<title>Страница</title>
<link href="scripts/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fon">
<img src="1.jpg" id="fonimg" />
</div>
<div id="page">
<center>
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr><td><div id="block1"><img src="1.png" /></div></td></tr>
<tr><td height="25px"></td></tr>
<tr><td><div id="block2"><img src="2.png" /></div></td></tr>
<tr><td height="25px"></td></tr>
<tr><td><div id="block3"><img src="3.png" /></div></td></tr>
</table>
</center>
</div>
</body>
</html>

styles.css

Код:

#fon{
height:100%;
width:100%;
z-index:1;
min-width:1000px;
max-width:1600px;
min-height:600px;
max-height:1600px;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
#fonimg{
height:100%;
width:100%;
position:fixed;
}
#page{
width:100%;
z-index:100;
min-width:1000px;
max-width:1600px;
position:absolute;
top:20px;
bottom:0;
right:0;
left:0;
}
#block1{
opacity:0.8;
filter: alpha(opacity=80);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
}
#block2{
opacity:0.8;
filter: alpha(opacity=80);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
overflow:auto;
width:900px;
height:450px;
}
#block3{
opacity:0.8;
filter: alpha(opacity=80);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
}

redreem · 27.09.2011, 22:10

<div class="divMain">
<div class="opacityBG"> </div>
<div class="divContent"
тут непрозрачный контент
</div>
</div>

стиль для opacityBG:
{position:absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background: - ну тут свой фон сделайте как хотите;
opacity:0.7} - для кроссбраузерности желательно прогнать опасити по классу каким-нибудь фреймворком после загрузки дома.

web_smile · 28.09.2011, 11:10

Спасибо, помогло. А возможно это как то применить к табличной верстке? Потому что, что бы это работало пришлось див вставлять за пределами таблицы.
Дело в том что блоки имеют определенную заданую ширину и высоту а не 100% и их несколько больше чем 3, 1 верхний (900х200) далее по середине слева блок 200х500 и справа 650х700 между ними расстояние 50, и далее нижний блок как и верхний 900х200 и разумеется они отцентрованы относительно страницы, потому верстка слоями для меня не совсем уместна =(
Вот собственно полный код структуры страницы:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Страница</title>
<link href="scripts/styles.css" rel="stylesheet" type="text/css" />
<script src="scripts/swfobject_modified.js" type="text/javascript"></script>
</head>
<body>
<div id="fon">
<img src="1.jpg" id="fonimg" />
</div>
<div id="page">
<center>
<table width="900" border="0" cellpadding="0" cellspacing="0">
  <tr>
<td>
<table width="900" border="0" cellpadding="0" cellspacing="0" id="opacity">
  <tr>
    <td width="20">
    <table width="20" height="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td valign="top"><img src="corners/tl.png" width="20" height="20" /></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td><img src="corners/bl.png" width="20" height="20" /></td>
  </tr>
</table>
    </td>
    <td bgcolor="#FFFFFF" align="center" valign="top">
    <table width="860" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td align="center" valign="top">
        
        </td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
    </td>
    <td width="20">
    <table width="20" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><img src="corners/tr.png" width="20" height="20" /></td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td><img src="corners/br.png" width="20" height="20" /></td>
  </tr>
</table>
    </td>
  </tr>
</table>
<div class="header" align="center"><img src="images/header.png"></div>
</td>
  </tr>
  <tr>
    <td height="20">&nbsp;</td>
  </tr>
  <tr>
    <td>
    
    <table width="900" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200" valign="top">
	<table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
<td valign="top">
<table width="200" border="0" cellpadding="0" cellspacing="0" id="opacity">
  <tr>
    <td><table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" width="20"><img src="corners/tl.png" width="20" height="20" /></td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td align="right" width="20"><img src="corners/tr.png" width="20" height="20" /></td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF"><p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p></td>
  </tr>
  <tr>
    <td>
    
    <table width="200" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" width="20"><img src="corners/bl.png" width="20" height="20" /></td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td align="right" width="20"><img src="corners/br.png" width="20" height="20" /></td>
  </tr>
</table>
</table>
</td>
  </tr>
  <tr>
    <td valign="bottom"><object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="180" height="180">
      <param name="movie" value="tagcloud.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="transparent" />
      <param name="swfversion" value="9.0.45.0" />
      <!-- Этот тег param предлагает пользователям Flash Player 6.0 r65 и более поздних версий загрузить последнюю версию Flash Player. Удалите его, если не хотите, чтобы пользователи видели запрос. -->
      <param name="expressinstall" value="scripts/expressInstall.swf" />
      <!-- Следующий тег object не поддерживается браузером Internet Explorer. Поэтому скройте его от Internet Explorer при помощи IECC. -->
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="tagcloud.swf" width="180" height="180">
        <!--<![endif]-->
        <param name="quality" value="high" />
        <param name="wmode" value="transparent" />
        <param name="swfversion" value="9.0.45.0" />
        <param name="expressinstall" value="scripts/expressInstall.swf" />
        <!-- Браузер отображает следующее альтернативное содержимое для пользователей Flash Player 6.0 и более старых версий. -->
        <div>
          <h4>Для содержимого этой страницы требуется более новая версия Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Получить проигрыватель Adobe Flash Player" width="112" height="33" /></a></p>
        </div>
        <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object></td>
  </tr>
</table>

    </td>
    <td width="50">&nbsp;</td>
    <td width="650">
<table width="650" border="0" cellpadding="0" cellspacing="0" id="center">
  <tr>
    <td><table width="650" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" width="20"><img src="corners/tl.png" width="20" height="20" /></td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td align="right" width="20"><img src="corners/tr.png" width="20" height="20" /></td>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">
    <div class="overflow">
Center
      </div>
      </td>
  </tr>
  <tr>
    <td>
    
    <table width="650" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" width="20"><img src="corners/bl.png" width="20" height="20" /></td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td align="right" width="20"><img src="corners/br.png" width="20" height="20" /></td>
  </tr>
</table>
</table>
    </td>
  </tr>
</table>
    </td>
  </tr>
  <tr>
    <td height="20">&nbsp;</td>
  </tr>
  <tr>
    <td>
<table width="900" border="0" cellpadding="0" cellspacing="0" id="opacity">
  <tr>
    <td width="100">
    <table width="100" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="20"><img src="corners/tl.png" width="20" height="20" /></td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td align="left">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="20"><img src="corners/bl.png" width="20" height="20" /></td>
        <td bgcolor="#FFFFFF">&nbsp;</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
    </td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td width="100">
    <table width="100" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="right">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td width="20"><img src="corners/tr.png" width="20" height="20" /></td>
      </tr>
    </table>
    </td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td align="right">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td bgcolor="#FFFFFF">&nbsp;</td>
        <td width="20"><img src="corners/br.png" width="20" height="20" /></td>
      </tr>
    </table>
    </td>
  </tr>
</table>
    </td>
  </tr>
</table>
</td>
  </tr>
</table>
</center>
</div>
<script type="text/javascript">
<!--
swfobject.registerObject("FlashID");
//-->
</script>
</body>
</html>

styles.css

Код:

#fon{
height:100%;
width:100%;
z-index:1;
min-width:1000px;
max-width:1600px;
min-height:600px;
max-height:1600px;
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
#fonimg{
height:100%;
width:100%;
position:fixed;
}
#page{
width:100%;
z-index:100;
min-width:1000px;
max-width:1600px;
position:absolute;
top:20px;
bottom:0;
right:0;
left:0;
}
#opacity{
opacity:0.7;
filter: alpha(opacity=70);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
}
#center{
opacity:0.9;
filter: alpha(opacity=90);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);
-moz-opacity: 0.9;
-khtml-opacity: 0.9;
}
.overflow {
	overflow:auto;
	width:650px;
	height:450px;
}
 .header {position:absolute;
 width: 800px;
 height: 100px;
 top:0;
 left:100px;
 opacity:1;
 z-index:100;
 }

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

В принципе результата я добился с хедером, но боюсь возникновения проблем с подобным позициированием при заполнении самой страницы.

redreem · 28.09.2011, 12:06

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

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Свойство Opacity на CSS!	maxefect	HTML, CSS, JavaScript	6	09.01.2012 13:04
body opacity	handler	HTML, CSS, JavaScript	3	15.07.2011 23:47
прозрачность	Rembrandt	HTML, CSS, JavaScript	32	02.07.2008 17:08
Проблема с filter: alpha(opacity=50)	BobiKK	HTML, CSS, JavaScript	1	07.11.2007 19:14
Прозрачность	GambitLK	HTML, CSS, JavaScript	13	06.04.2005 23:51

27.09.2011, 22:10	#2
redreem	<div class="divMain"> <div class="opacityBG"> </div> <div class="divContent" тут непрозрачный контент </div> </div> стиль для opacityBG: {position:absolute; width: 100%; height: 100%; top:0; left:0; background: - ну тут свой фон сделайте как хотите; opacity:0.7} - для кроссбраузерности желательно прогнать опасити по классу каким-нибудь фреймворком после загрузки дома.

28.09.2011, 12:06	#4
redreem	незнаю. я таблицы применяю очень редко. и только там, где нужно табличное представление данных. поместите конструкцию внутрь ячейки, указав у внешнего дива 100% ширину и высоту и посмотрите что получится. но как правило дивы в ячейках в разных браузерах бывет поразному работают. я бы на вашем месте выкинул таблицы и сверстал все дивами.

27.09.2011, 18:19
Ссылки