使整个网页着色 [英] Make an entire webpage be tinted
问题描述
如何处理任何给定的网页，并使所有内容看起来都带有某种颜色.基本上，如果您使用google并将其设置为橙色，它应该看起来像这样:
How I can take any given webpage and make everything look tinted a certain color. Basically, if you take google and tint it orange, it should look something like this:
我一直试图做到这一点的方法是在网页的body标签的非常结尾处添加一个div.基本上，这就是我要做的:
The way that I have been trying to accomplish this is by adding a div at the VERY END of a webpage's body tag. Basically, this is what I do:
<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中执行此操作时，会发生以下情况:
Unfortunately, what happens when you do this in Google looks like this:
如您所见，第二张图片中的色调不会影响Google网页的顶部栏.这只是我的代码无法正常工作的一个示例，聊天对话或facebook的标题栏都会被我的代码着色.我确信在很多情况下我的代码无法完全着色整个页面.我不确定将div添加到网页是否正确，或者我应该尝试使用javascript.如果不清楚，我希望能够在浏览器中着色网页，而不是像我对第一张图片所做的那样，通过截屏并在程序中编辑图片来实现.
As you can see, the top bar of Google's webpage is not impacted by the tint in this second picture. This is just one example of my code not working, the chat conversations nor the header bar of facebook gets tinted by my code. I'm sure there are plenty of cases where my code does not completely tint the whole page. I am not sure if adding a div to webpages is the right way or maybe I should just try something with javascript. If it isn't clear, I want to be able to tint the webpage in the browser, NOT by screen capturing it and editing the image in a program as I have done with the first image.
最后，我对我的项目所需要的是能够以许多奇怪的方式操纵网页的视觉输出(拉伸页面，使其变暗，使其模糊，使其看起来像鱼眼，使其像屏幕晃动等).本质上，我想学习如何对网页进行尽可能多的控制.即使您不能帮助我实现这一目标，但是如果您可以通过当前以任何方式为网页着色的问题来帮助我，我也将不胜感激.
In the end, what I need for my project is to be able to manipulate the visual output of a webpage in many strange ways (stretch the page, dim it, blur it, make it look fisheye, make it shake like the screen is shaking, etc.). Essentially, I want to learn how to have as much control over a webpage as possible. Even if you can't help me achieve this, if you can help me with the current issue of tinting the webpage in any way, I would appreciate it.
推荐答案
您还需要一些CSS样式:
You need a few more css styles:
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.
Regarding the last part of your question, you should be applying classes to <body> Then you dont have to insert divs.
例如，这是通过将tint类添加到<body>标记中来进行着色的一种方法
For example, here's a way to do the tint by just adding tint class to the <body> tag
.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
这篇关于使整个网页着色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
