一部のdivを除いてグレースケールのWebサイト全体

私は、ポップアップが表示されたページを持っています。サイト全体がグレースケールになっていますが、divをポップアップして非グレースケールにする必要があります。私はfilter: noneまたは-webkit-filter: grayscale(0);で試しましたが、ページ全体がグレースケールで動作していません。誰もそれについて考えているのですか？ありがとう！一部のdivを除いてグレースケールのWebサイト全体

-webkit-filter: grayscale(0) !important; 
filter: grayscale(0) !important;

マイコード：Jsfiddle

出典

2017-12-01 Sammi

可能な複製（https://stackoverflow.com/questions/26087286/want-to-make-the-whole -page-in-grayscale-except-specified-div） – ceejayoz

こんにちは、上記の要件を達成するために、オプションの1つはボディの上にオーバーレイdivを作成することです。本体ではなくグレースケールにすることができます。後で、オーバレイより 'z-index' +1であなたのポップアップを表示します。本体にグレースケールを適用しているので、ポップアップは同じスタイルの継承もしています。 – CuriousMind

@Samiあなたはまた、すべてのウェブサイトのコードを.filterのポップアップコードからエスケープすることでこれを行うことができます。その後、フィルタクラス内の任意のフィルタを使用できます。 –

-webkit-filterは、カスケードダウンして上書きすることができ、それは全体の要素とその子の上に適用されていますプロパティではありません。子にフィルタを置くと、それは親のフィルタの上に積み重なります。

代わりに、グレーアウトしたいすべてのものの親である要素にフィルタを配置する必要があります。

div { 
 
    height: 20px; 
 
    position: relative; 
 
}

<div> 
 
    <div style="-webkit-filter: grayscale(1)"> 
 
    <div style="background: red">Sample</div> 
 
    <div style="background: blue">Sample</div> 
 
    </div> 
 
    <div style="background: green; position: absolute; top: 10px;">Sample</div> 
 
</div>

[指定したdiv要素を除いて、グレースケールでページ全体を作りたい]の

出典

2017-12-01 06:35:36

ジャックのフィルタとそのカスケード効果について、ジャックを明確にしてくれてありがとう。 – CuriousMind

一部のdivを除いてグレースケールのWebサイト全体

答えて

関連する問題