gpt4 book ai didi

javascript - 使整个网页着色

转载 作者:太空宇宙 更新时间:2023-11-04 14:58:01 28 4
gpt4 key购买 nike

我如何将任何给定的网页并使所有内容看起来都带有某种颜色。基本上,如果你使用 google 并将其染成橙色,它应该看起来像这样: Example of what correctly tinted webpage would look like

我一直试图实现这一点的方法是在网页正文标记的最后添加一个 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 中执行此操作时会发生如下情况: Filter that does not cover the whole page

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

最后,我的元素需要的是能够以许多奇怪的方式操纵网页的视觉输出(拉伸(stretch)页面、调暗它、模糊它、让它看起来像鱼眼、让它像屏幕晃动等)。本质上,我想学习如何尽可能多地控制网页。即使您不能帮助我实现这一目标,如果您能以任何方式帮助我解决当前网页着色问题,我将不胜感激。

最佳答案

您还需要一些 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 */

enter image description here

更新

关于你问题的最后一部分,你应该将类(class)应用于 <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

关于javascript - 使整个网页着色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38909314/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com