CSS中的图像透明度

Question

CSS中的图像透明度

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>

有什么想法吗？谢谢。

- Mike

4个回答

2

如果我理解您的意思正确，尝试只使用一个div（即摆脱ID为“a”的外部div），并在其周围设置有色边框。或者您可以通过使用4个div来模拟左侧，右侧，顶部和底部边缘以及另外4个div来模拟角落来获得更大的灵活性。

如果没有示例页面或屏幕截图，很难知道您的意思以及您实际得到了什么。

编辑：我正要编辑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>

- David

我认为他想要的是一个半透明的边框，这样图像在其下部分可见。 - TM.

尽管 REX M 所拥有的更加“理想化”，但如果您正在使用 JavaScript 更改图像，则您的代码非常有用，此时这段代码更加实用。 - Shard

0

跟随Rex M所说，您需要更改内容，以便非透明元素不是透明元素的子元素。

您可以使用绝对或相对定位来将您的“边框”与图片对齐，尽管这在浏览器之间经常存在不一致性。

我能想到的最简单的方法是使用JavaScript获取图像的顶部和左侧像素位置，并将边框的顶部/左侧CSS属性设置为匹配（并将边框的大小设置为图像的大小）。

更新：

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

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

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

通过mousemove事件更新大小。

- TM

0

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

div#a img { background: #FFF; }

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

我可能误解了问题。您能否重新表述或提供预期结果的图片？

- Arve Systad

好的，我希望整个图像具有较暗的不透明度，只有框是透明的，这样我就可以在框内看到原始颜色而没有任何不透明度。 - Mike

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rex M · Accepted Answer

元素的最大不透明度是其父元素的透明度。所以如果 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>