3

使内盒透明的最佳方法是什么（如果有的话），这样可以看到没有不透明的图像（清晰的图像），而外盒的其余部分不透明。到目前为止，这就是我正在做的事情：

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

有任何想法吗？谢谢

4

4 回答 4

7

元素的最大不透明度是其父元素的不透明度。因此，如果 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>
于 2009-02-08T02:43:16.750 回答
2

如果我理解正确，请尝试仅使用一个 div（即去掉 ID 为“a”的外部 div）并在其周围设置彩色边框。或者，您可以通过使用 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>
于 2009-02-08T02:48:28.800 回答
0

要遵循Rex M所说的内容，您需要进行一些更改，以使非透明元素不是透明元素的子元素。

您可以使用绝对或相对定位将“边框”与图片对齐，尽管这通常会在浏览器之间产生不一致。

最轻松的方法是使用 javascript 获取图像的顶部和左侧像素位置，并将边框的顶部/左侧 css 属性设置为匹配（并将边框的大小设置为图片）。

更新：

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

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

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

大小通过 mousemove 事件更新。

于 2009-02-08T02:49:04.070 回答
0

如果您想确保图像具有特定的背景颜色，您也可以将背景粘贴到样式表中的所有 IMG 元素：

div#a img { background: #FFF; }

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

不过，我可能误解了这个问题。您能否改写它或提供预期结果的图片？

于 2009-02-08T02:49:52.447 回答