实现半透明效果

最新推荐文章于 2025-05-20 11:15:37 发布

原创最新推荐文章于 2025-05-20 11:15:37 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

tips 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种在网页中创建半透明覆盖层的方法。通过JavaScript动态生成并设置div元素的样式，实现全屏覆盖效果，并调整其透明度。文中提供了初始化、启用及禁用覆盖层的函数。

        objOverlay.style.backgroundColor = '#5f9ea0';
        objOverlay.style.filter = "alpha(opacity=40)";
        objOverlay.style.opacity = "0.4";

objOverlay是我们要使用的覆盖层。

一般来说实现半透明效果的覆盖层，使用以下三个函数就行了。

function initOverLay(){
		var objOverlay = document.getElementById("overlay");
		if(objOverlay){
		objOverlay.style.display = 'none';
		}
		else{
		objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.zIndex = 100;
		objOverlay.style.top = "0px";
		objOverlay.style.left = "0px";
		objOverlay.style.position = "absolute";
		objOverlay.style.backgroundColor = '#5f9ea0';
		objOverlay.style.filter = "alpha(opacity=40)";
		objOverlay.style.opacity = "0.4";
		objOverlay.style.display = 'none';
		objOverlay.style.height = (window.innerHeight||document.documentElement.offsetHeight) + "px";
		objOverlay.style.width = Math.max(document.documentElement.scrollWidth,document.documentElement.offsetWidth) + "px";
		objOverlay.onclick = function() { return; }
		document.getElementById("content").appendChild(objOverlay);
		}
}
function enableOverLay(){
		var objOverlay = document.getElementById("overlay");
		objOverlay.style.display = '';
}
function disableOverLay(){
		var objOverlay = document.getElementById("overlay");
		objOverlay.style.display = 'none';
}