7

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

它在整个页面上应用了一个半透明的黑框以进行夜间浏览。

我在用着：

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，它将代码重复到这些页面中，从而创建了我制作的半透明暗盒的双重叠加。

所需的外观是：

我已经尝试过 hack-ish 的东西，比如对 iframe 应用更高的 z-index 并将 iframe 中任何内容的背景颜色和背景指定为“白色”和“不透明”，以便它“浮动”父 html 页面的顶部，但这并不完美。我也尝试过类似的东西：

html:not(iframe):before{}

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

我已经竭尽全力试图让它发挥作用，所以任何帮助都将不胜感激。谢谢你。

4

4 回答 4

1

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

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

演示

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

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

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

document.documentElement.style.boxShadow = "inset 0 0 0 2000px rgba(2, 3, 3, .35) !important";
于 2013-05-07T20:53:53.403 回答
1

不幸的是，没有办法使用 CSS 仅针对iframe来自 的源（iframe即包含该iframe元素的页面）中的内容。

我假设，因为您使用的是 Stylish，所以您的 CSS 位于 Firefox 用户样式表中。如果是这样，您可能必须查看这些iframes 的源 URL，在其域中创建@-moz-document针对这些 URL 的规则，并html:before相应地删除伪元素。

像这样的东西，应该低于你已经拥有的东西：

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

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

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

于 2013-05-07T20:55:53.227 回答
0

编辑：

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

或者也许使用 html:first-child ？老实说，我不知道会发生什么，不过你可以试一试

于 2013-05-07T20:39:28.570 回答
0

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

于 2013-05-07T20:55:29.350 回答