0

Is there any way to have a semi-transparent overlay in a webpage and will brighten the underlying content? I'm wanting to have a dynamic content in the background of a transparent overlay with one section highlighted in a brighter than the rest of the background.

For example, in the mock-up below there is a graph in the background, overlaid by a dark black image, which, in turn, is overlaid by a lighter color on the right.

alt text http://img197.imageshack.us/img197/5736/screenshot20091203at114.png

Is such a thing possible using either Javascript, CSS, HTML, transparent PNGs, etc.?

Edit: maybe there is a way to use CSS opacity to have a partially transparent black layer, overlaid by a partially transparent white layer, giving the shades of grey, as in the example image (thanks for everyone's ideas so far).

4

3 回答 3

0

您可以捕获 DOM 对象的位置，检索其大小并覆盖一组 DIV，为您的“突出显示”区域创建一个“带窗口的墙”。

于 2009-12-02T22:35:49.840 回答
0

您可以在另一个背景上使用透明 PNG 来获得此效果：

<div style="float: left; background-image:url(solid.jpg); width: 100%;">
 <div style="width: 300px; background-image:url(white-50-percent-opacity.png);">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempo . . .
 </div>
</div>

哪里solid.jpg是不透明的背景图片，white-50-percent-opacity.png是半透明的 PNG。

于 2009-12-02T22:47:24.140 回答
0

这可以通过纯 HTML + CSS 以相对跨浏览器兼容的方式实现。您不需要使用 PNG，只需将一个元素放在具有白色背景和opacity: 0.5. 对于 IE，还提供filter: alpha(opacity=50)变体。

为了简化定位，将黑色条设置为相对位置，然后将白色覆盖绝对定位在里面。

例如：

<label><span style="left: 50px; width: 100px;"></span></label>

和CSS：

label {
    background: #000;
    width: 150px;
    height: 20px;
    display: block;
    position: relative;
}

span {
    display: block;
    height: 20px;
    position: absolute;
    background: #fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
于 2009-12-02T22:51:26.023 回答