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