Question

我正在为附件“时尚”制作用户样式表。

它在整个页面上应用了一个半透明的暗盒，用于夜间浏览。

我正在使用：

html:before {
    content:url()!important;
    position:fixed!important;
    width:100%!important;
    height:100%!important; 
    top:0!important; 
    left:0!important; 
    background:rgba(2,3,3,.35)!important; 
    z-index:99999999999999999!important;
    pointer-events:none!important;
}

创建固定的，叠加的div。

这很好用，但是，如果网站中有任何iframe，它会将此代码应用到iframe的HTML中，您可以在此处看到：

因为这些社交网络小部件依赖于IFRAME，它将代码重复到这些页面中，创建了我所制作的半透明暗盒的双重覆盖。

所需的外观将是：

我尝试了很多东西，例如将更高的z-index应用于iframe，并将iframe中任何内容的背景颜色和背景指定为'white'和'opaque'以便它''浮动'在父html页面的顶部，但这不能很好地工作。我也尝试过这样的事情：

html:not(iframe):before{}

但这也行不通。我想知道是否有办法以不依赖'html：before'来创建相同效果的方式做我正在尝试做的事情，或者是否有办法做到但没有它在页面上的iframe的html内重复。

我已经用尽了努力让它发挥作用，所以任何帮助都会非常感激。谢谢。

Answer 1

您可能想尝试不同的路线：

html {
    box-shadow: inset 0 0 0 2000px rgba(2, 3, 3, .35) !important;
}

<强> Demo

这样，当用户的浏览器不支持pointer-events时，网页仍然可用。

您可能还想查看此问题：CSS - max z-index value

要将这些样式仅应用于父文档的<html>元素，而不是iframe，只需将box-shadow应用于document.documentElement和JS：

document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";

Answer 2

不幸的是，使用CSS无法仅从iframe的源（即包含iframe元素的页面）中定位iframe的内容。

我假设，因为你正在使用Stylish，你的CSS是在Firefox用户样式表中。如果是这样，您可能需要查看这些iframe的源网址，创建针对其域中这些网址的@-moz-document规则，并相应地删除html:before伪元素。< / p>

这样的东西应该低于你已有的东西：

@-moz-document domain(/* Facebook Like */), 
    domain(/* Tweet Button */), 
    domain(/* Google +1 */)
{
    html:before
    {
        content: none !important;
    }
}

content: none声明禁用伪元素，阻止它被渲染。

必须以这种方式排除特定域名意味着这种方法非常有限，而且根本不是非常通用，但这是我能想到的最好的。

Answer 3

编辑：

我不知道插件的内容，但你可以给你的HTML标签一个ID并以那种方式定位它，虽然如果你想要这个适用于所有页面那么那就是一个问题

或者可能使用html：first-child？老实说我不知道会发生什么，你可以尝试一下

Answer 4

CSS不允许您在iframe中设置HTML样式。由于您使用的是附加组件，因此这是CSS的非标准实现。 iframe不会继承样式，因为iframe基本上是一个新的浏览器窗口。附加组件将样式添加到浏览器窗口中的每个HTML页面。浏览器无法知道页面是否在iframe中（至少不能通过CSS访问）。

将css应用于html而不是iframe html

4 个答案: