图像中的 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>