Изменение непрозрачности для div в div - это возможно? Как?

Question

Я получил от веб-дизайнера, который содержит (зонд):

<div id="subMenuRow">
 <div id="subMenuRowHTML">
  <a href="/link">Link</a>
 </div>
</div>

и соответственно css для него:

#subMenuRow{
        width: 900px;
        height: 40px;
        background: #000000;
        float: left;
        clear: both;
        filter:alpha(opacity=30);
        -moz-opacity:0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;
}

Непрозрачность используется для создания прозрачной панели для HTML-меню. Проблема в том, что каждый текст, включая ссылки, также содержит прозрачность, что очень не нужно. Как избежать непрозрачности для subMenuRowHTML?

Answer 1

использовать полупрозрачный .png в качестве фонового изображения:

CSS:

background: transparent url(/url/image.png) top left repeat;

Answer 2

Во-первых, вам больше не нужно использовать -moz-opacity и -khtml-opacity. Они очень, очень старые.

Сегодня не существует полностью поддерживаемого решения. CSS3 RGBA решает эту проблему в современных браузерах, но если вам нужно поддерживать старые браузеры, вам нужно использовать полупрозрачный png:

#subMenuRow { background: url(semi-trans.png); }

IE6 изящно ухудшится с этим:

* html #subMenuRow { background: url(full-opacity.gif); }

Есть также простые опции для прозрачности png в IE6. Это зависит от вас.

Если у вас много экземпляров opacity в вашем коде и вы не хотите путать ваш код с * html, везде вы можете использовать условные комментарии.

Answer 3

Добавить: #subMenuRowHTML { filter:none; -moz-opacity:1; -khtml-opacity:1; opacity:1; }