7

アドオン「stylish」のユーザースタイルシートを作成中です。

ページ全体に半透明のダーク ボックスを適用して、夜のブラウジングをサポートします。

私は使用しています：

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 に依存しているため、これらのページにコードが繰り返され、作成した半透明のダーク ボックスの二重オーバーレイが作成されます。

望ましい外観は次のようになります。

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;
}

デモ

このようにして、ユーザーのブラウザーが をサポートしていない場合でも、Web ページを使用できますpointer-events。

この質問をチェックアウトすることもできます: CSS - 最大 z-index 値

これらのスタイルを親ドキュメントの<html>要素のみに適用し、iframe には適用しない場合は、JSでbox-shadowtoを適用するだけです。document.documentElement

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