Question

我正在编写小火狐插件，以便在晚上舒适地阅读页面。它应该反转页面颜色但不反转图像。代码是：

document.body.style.filter = "invert(100%)";

var imgs = document.getElementsByTagName("img");

for (var i = 0; i < imgs.length; i++) {
    imgs[i].style.removeProperty("filter"); // NOT WORKING
    imgs[i].style.filter = "invert(0%)";    // NOT WORKING EITHER
}

问题在于它没有按预期工作 - 图像仍然反转，firefox中的检查元素显示它们具有正确的反转（0％）样式。

Answer 1

如果您将身体反转为 all ，则其内容将被反转。要以原始颜色显示图像，您需要再次反转它们，即将invert(100%)应用于它们。

请注意，这与CSS继承不同，过滤器概念性地应用于将盒子的像素合成到其父级时，图像位于<body>框内，这也是它们反转的原因。< / p>

小旁注：您可能希望将其应用于document.documentElement或:root选择器 - 在大多数情况下是<html>节点 - 因为实体可能小于public HttpResponseMessage GetFile(string filename) { try { if (!string.IsNullOrEmpty(filename)) { //string filePath = HttpContext.Current.Server.MapPath("~/App_Data/") + fileName; DirectoryInfo dirInfo = new DirectoryInfo(HostingEnvironment.MapPath("~/Documentos")); string filePath = dirInfo.FullName + @"\" + filename; using (MemoryStream ms = new MemoryStream()) { using (FileStream file = new FileStream(filePath, FileMode.Open, FileAccess.Read)) { byte[] bytes = new byte[file.Length]; file.Read(bytes, 0, (int)file.Length); ms.Write(bytes, 0, (int)file.Length); HttpResponseMessage httpResponseMessage = new HttpResponseMessage(); httpResponseMessage.Content = new ByteArrayContent(bytes.ToArray()); httpResponseMessage.Content.Headers.Add("x-filename", filename); httpResponseMessage.Content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");//application/octet-stream httpResponseMessage.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment"); httpResponseMessage.Content.Headers.ContentDisposition.FileName = file.Name; httpResponseMessage.StatusCode = HttpStatusCode.OK; return httpResponseMessage; } } } return new HttpResponseMessage(HttpStatusCode.NotFound); } catch (Exception) { return new HttpResponseMessage(HttpStatusCode.BadRequest); } }节点视。另一件需要考虑的事情是嵌套在倒置文档中的框架。

覆盖CSS过滤器反转在Mozilla Firefox中不起作用

1 个答案: