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>

有什么想法吗？ THX

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>

Answer 2

如果我理解正确，请尝试只使用一个div（即去除ID为“a”的外部）并在其周围设置彩色边框。或者你可以通过“伪造”一个边框来获得更大的灵活性，使用4个div来表示左边，右边，顶边和底边，还有4个边角用于边角。

如果没有示例页面，或者您期望的内容以及实际获得的内容的截图，很难知道您的意思。

编辑：我即将编辑Rex M写的基本相同的东西。这是另一种方法（虽然理想上较低）：

<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属性以匹配（并将边框的大小设置为那个图像）。

更新：

提问者展示了他试图重建的一个例子。在链接的示例中，图片的阴影区域（“未选择”区域）由4个div创建。

顶部和底部div是图像的整个宽度，并且设置为高度分别是选择框的顶部/底部和图像的顶部/底部之间的差异。

侧面div的高度和宽度已修改，以便填充图像的“侧面区域”。

通过mousemove事件更新尺寸。

Answer 4

如果你想确保图像具有某种背景颜色，你也可以将背景贴在样式表中的所有IMG元素上：

div#a img { background: #FFF; }

无论如何，CSS中的filter-property不应该被依赖，因为它不是CSS 2.1官方规范的一部分。

但是，我可能误解了这个问题。你能改写它或提供预期结果的图片吗？

图像中的CSS不透明度

4 个答案: