Javascript 使整个网页着色
我如何可以采取任何给定的网页，使一切看起来有一定的颜色。基本上，如果你用谷歌把它涂成橙色，它应该是这样的： 我一直试图通过在网页的body标签的末尾添加div来实现这一点。基本上，我就是这么做的：Javascript 使整个网页着色,javascript,html,css,Javascript,Html,Css,我如何可以采取任何给定的网页，使一切看起来有一定的颜色。基本上，如果你用谷歌把它涂成橙色，它应该是这样的： 我一直试图通过在网页的body标签的末尾添加div来实现这一点。基本上，我就是这么做的： <head> stuff that goes in head... </head> <body> all the content of the webpage... <div style="position:fixed;height:100%;wid
<head>
stuff that goes in head...
</head>
<body>
all the content of the webpage...
<div style="position:fixed;height:100%;width:100%;
left:0px;top:0px;opacity: 0.5;">
<div style="height:100%;width:100%;position:static;
background-color:orange"></div>
</div>
</body>
脑子里的东西。。。
网页的所有内容。。。
最后，我的项目需要的是能够以许多奇怪的方式操纵网页的视觉输出（拉伸页面、使其变暗、使其模糊、使其看起来像鱼眼、使其像屏幕一样抖动，等等）。本质上，我想学习如何尽可能多地控制网页。即使你不能帮我做到这一点，如果你能以任何方式帮助我为网页着色，我将不胜感激 在本例中，您需要
z-indexz-index .oranged {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: orange;
opacity: 0.4;
z-index: 1000;
}
<div class="oranged"> </div>
.oranged{
位置：固定；
排名：0；
左：0；
宽度：100vw；
高度：100vh；
背景颜色：橙色；
不透明度：0.4；
z指数：1000；
}
<div style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: orange;z-index: 1000;opacity: 0.4;"></div>
您还需要一些css样式：
position: fixed; /* keeps the screen covered durning scroll */
z-index: 100000; /* puts it on top of everything */
top: 0;
left: 0;
opacity: .3; /* so we can see through it */
pointer-events: none; /* so we can click through it */
tint.tint:after {
content: '';
position: fixed;
z-index: 100000;
top: 0;
left: 0;
opacity: .3;
pointer-events: none;
background: orange;
width: 100%;
height: 100%;
}
.tint.dim:after {
background: black;
opacity: .6;
}
对于动画，请查看尝试高
z-index