Question

有没有办法在网页上设置半透明叠加层并使基础内容变亮？我希望在透明叠加层的背景中有一个动态内容，其中一个部分突出显示比背景的其他部分更亮。

例如，在下面的模型中，背景中有一个图形，由深黑色图像覆盖，而黑色图像又由右侧较浅的颜色覆盖。

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

是否可以使用Javascript，CSS，HTML，透明PNG等？

编辑：也许有一种方法可以使用CSS不透明度来获得部分透明的黑色图层，由部分透明的白色图层覆盖，呈现灰色阴影，如示例图像所示（感谢目前为止所有人的想法）。

Answer 1

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

Answer 2

您可以在其他背景上使用透明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。

Answer 3

这可以通过纯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);
}

照亮网页背景的一部分

3 个答案: