Changing transparency for div to div - is this possible? How?

Question

I got from a web designer layout that contains (probe):

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

and accordingly css for it:

#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;
}

Opacity is used to create a transparent panel for the html menu. The problem is that every text, including links, also contains transparency, which is very unnecessary. How to avoid opacity for subMenuRowHTML?

Answer 1

At first, you no longer need to use -moz-opacityand -khtml-opacity. They are very old.

Today there is no complete solution. CSS3 RGBA solves this in modern browsers, but if you need to support older browsers, you will need to use translucent png:

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

IE6 :

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

png IE6. .

opacity * html , .

Answer 2

.png :

CSS

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

Answer 3

Add:

#subMenuRowHTML {
filter:none;
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
}