Question

我是javascript的新手。实际上很新，这应该是我的第一个剧本。任何人都可以向我解释如何在任何指定的固定宽度区域上制作透明覆盖，比如700x300px。

Answer 1

您可以定义叠加层，例如

<div id="myoverlay" class="myoverlay">...contents...</div>

并在CSS

中定义尺寸和位置以及z-index等

.myoverlay {
   position: absolute;
   display: none;
   ...
}

我还没有看到对JavaScript的需求，但我想你会想要使用JS来打开/关闭叠加层的显示属性。

<script type="text/javascript">
function showOverlay(){
  document.getElementById("myoverlay").style.display = "block";
}
</script>

这大致是你追求的吗？对于无意识的语法错误感到抱歉，因为这是完全没有经过考验的代码。只是为了给你一个想法。

Answer 2

您可以创建一个具有透明度的div，并将其绝对放置在指定区域上。

var shimDiv = document.createElement('div');  
shimDiv.id = 'shim';  
shimDiv.style.position = 'absolute';  
shimDiv.style.top = 0;  
shimDiv.style.left = 0;  
shimDiv.style.width = "700px";  
shimDiv.style.height = "300px";  
shimDiv.style.backgroundColor = '#000'; 
shimDiv.style.zIndex = 3;

对于非IE浏览器设置不透明度：

shimDiv.style.opacity = '0.75';

由于IE本身不支持透明度，因此您应该使用如下过滤器：

shimDiv.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=75)';

并将此新div添加到文档正文的末尾：

document.body.appendChild(shimDiv);

要支持较旧的IE版本，您必须将IFrame元素放在透明DIV下。

要从JavaScript动态创建IFrame，请尝试以下代码：

var iframe = document.createElement('iframe');
iframe.setAttribute("src", "javascript:false");

不要忘记使用无用的“javascript：false”语句设置IFrame src属性，以防止IFrame尝试加载页面（您不会注意到它会这样做，但它会导致绊倒“Unsecured”如果您在HTTPS页面上使用它，则为“消息”。

将此IFrame置于div下，为其提供较低的z-index属性值。

iframe.style.zIndex = 2;

所有样式都可以使用CSS完成。我只想展示它是如何用JavaScript完成的。

javascript图像覆盖在指定的div上

2 个答案: