CSS opacity in image

Question

What is the best way (if any) to make the inner window transparent so that the image can be seen without transparency (transparent image) and the rest of the outer box is opaque. So far this is what I am doing:

<style>
#a {
  background-color: black;
  float: left;
} #b {
    opacity : 0.4;
    filter: alpha(opacity=40); 
} #div {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 90px;
    left: 90px;
    border: 1px solid #FFF;
    background: transparent;
}
</style>

<div id="a">
  <div id="b">    
    <img src="http://clagnut.com/images/ithaka.jpg" />
  </div>
</div>
<div id="div"></div>

Any ideas? THX

Answer 1

The maximum opacity of an element is the opacity of its parent element. Therefore, if div # b has an opacity of 40%, if his children have 100% opacity in the style, they will also have 40% absolute opacity.

, ( , , ), , div . , .

. , . 480 x 320 30- :

<style>
    #back {background-image:url(mypicture.jpg);
               width:480px;
               height:320px;
               position:relative;}
    #middle {position:absolute;
                 width:480px;
                 height:320px;
                 background-color:#000;
                 opacity:0.4;
                 filter:alpha(opacity=40);
                 top:0;
                 left:0;}
    #front {position:absolute;
                width:420px; /* 30px border on left & right */
                height:260px; /* 30px border on top & bottom */
                background-image:url(mypicture.jpg);
                background-position:-30px -30px; /* compensate for the border */
                top:30px;
                left:30px;}
</style>

<div id="back">
    <div id="middle">
    </div>
    <div id="front">
    </div>
</div>

Answer 2

, div (.. "a" ) . , "" , 4 divs , , 4 .

, , , , , .

EDIT: , . ( ) :

<style>
#a {
    float: left;
    position: relative;
}
div.overlay {
    opacity: 0.4;
    background-color: black;
    position: absolute;
}
#t {
    left: 0; top: 0; height: 90px; width: 450px;
}
#b {
    left: 0; top: 120px; height: 218px; width: 450px;
}
#l {
    left: 0; top: 90px; height: 30px; width: 90px;
}
#r {
    left: 120px; top: 90px; height: 30px; width: 330px;
}
</style>
<div id="a">
    <div id="t" class="overlay"></div>
    <div id="b" class="overlay"></div>
    <div id="l" class="overlay"></div>
    <div id="r" class="overlay"></div>
    <img src="http://clagnut.com/images/ithaka.jpg">
</div>

Answer 3

, Rex M, , .

, "" , .

- javascript, / CSS , ( ).

UPDATE:

, . ( " " ) 4 div.

divs - , , / / .

divs , " " .

mousemove.

Answer 4

If you want to be sure that the images have a specific background color, you can use the background for all IMG elements in the stylesheet just as well:

div#a img { background: #FFF; }

In any case, the filter property in CSS should not be relied on since it is not part of the official specifications for CSS 2.1.

Perhaps I misunderstood this question. Could you rephrase it or provide photos of the expected results?