Question

如何使用任何给定的网页，让所有内容看起来都是某种颜色。基本上，如果你把谷歌和色调橙色，它应该看起来像这样：

我一直在努力实现这一目标的方法是在网页的body标签的VERY END处添加一个div。基本上，这就是我所做的：

<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>

不幸的是，在Google中执行此操作时会发生以下情况：

正如您所看到的，Google网页的顶部栏不会受到第二张图片中色调的影响。这只是我的代码不工作的一个例子，聊天对话和facebook的标题栏都被我的代码染色。我确信有很多情况下我的代码并没有完全整理整个页面。我不确定是否在网页上添加div是正确的方法，或者我应该尝试使用javascript。如果不清楚，我希望能够在浏览器中对网页进行着色，而不是通过屏幕捕获它并在程序中编辑图像，就像我对第一张图像所做的那样。

最后，我的项目需要的是能够以许多奇怪的方式操纵网页的视觉输出（拉伸页面，调暗，模糊，使其看起来像鱼眼，让它像摇动一样屏幕在颤抖等）。从本质上讲，我想学习如何尽可能多地控制网页。即使你无法帮我实现这一目标，如果你能帮助我解决当前任何网页着色问题，我将不胜感激。

Answer 1

您需要更多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 */

更新

关于问题的最后部分，您应该将课程应用到<body>然后您不必插入div。

例如，只需将tint类添加到<body>代码

，就可以了解色调的方法

.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;
}

对于动画，请查看Animate.css

Answer 2

您需要z-index，因为它的某些元素已指定z-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>

或即时......

<div style="position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: orange;z-index: 1000;opacity: 0.4;"></div>

使整个网页着色

2 个答案:

更新