使用style 对象实现图片的覆盖（overlay）
Posted 欢迎
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用style 对象实现图片的覆盖（overlay）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>覆盖显示图片</title>
</head>
<style>
#outer {
width: 100%;
height: 100%;
}
.overlay { //这个style是通过createElement 中的设置id =overlay 的
background-color: #000;
/*//opacity 属性设置元素的不透明级别*/
opacity: 7;
filter: alpha(opacity=70);
position: fixed;
top: 0;
left: 0;
/*相对于浏览器定位，
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。*/
width: 100%;
height: 100%;
z-index: 10;
/*属性设置元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。*/
}
</style>
<script type="text/javascript">
function expandPhoto() {
var overlay = document.createElement("div"); //创建节点div
overlay.setAttribute("id", "overlay"); 添加id =overlay
overlay.setAttribute("class","overlay"); 添加class=overlay
document.body.appendChild(overlay); 将其添加到body 尾部
var smallImg = document.getElementById("smallImg");
var img = document.createElement("img"); //创建img 节点
img.setAttribute("id", "img"); //img 的 id 为img
img.src = smallImg.getAttribute("data-larget");//获取大图，以下为图的大小，图的位置
img.style.width = "400px";
img.style.height = "300px";
img.style.position = "absolute";
img.style.zIndex = "11"
img.style.left = "50px";
img.style.top = "50px";
document.body.appendChild(img);//将获取的大图添加到body的尾部
}
</script>
<body>
<div id="outer">
<p>单击显示图效果</p>
<img src="img/360.png" id="smallImg" data-larget="/DOMHTML/img/timg.jpg" onclick="expandPhoto()" />
</div>
</body>
</html>
</body>
以上是关于使用style 对象实现图片的覆盖（overlay）的主要内容，如果未能解决你的问题，请参考以下文章
FFmpeg-4.2.4的filter: overlay源码分析
R语言使用ggplot2可视化互相覆盖的直方图实战（Overlaying histograms）
javascript [loading overlay jquery]显示加载覆盖/封面#jquery