图像中的CSS不透明度

Question

什么是使内盒透明的最佳方式(如果有的话),以便可以看到没有不透明度的图像(清晰图像),而外盒的其余部分是不透明的.到目前为止,这就是我正在做的事情:

<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>

有任何想法吗？谢谢

Answer 1

元素的最大不透明度是其父元素的不透明度.因此,如果div#b的不透明度为40%,如果他的孩子在风格上具有100%的不透明度,那么他们的绝对不透明度也是40%.

要完成你所描述的内容(至少我认为你所描述的内容),一种方法可能是使透明包装器和父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>