ページ全体をimg以外のグレースケールで変換することはできますか？

は私がしようとしたが、それは動作しません：ページ全体をimg以外のグレースケールで変換することはできますか？

body { 
    -webkit-filter: grayscale(100%); 
} 
img { 
    -webkit-filter: none !important; 
}

出典

2016-04-09 Fahrenheit

それはしていません。イメージはボディの内容の一部であり、グレースケールに変換されます。「私をグレースケールに変換しないでください」と言って、もう一度色を付けるつもりはありません。 – CBroe

CSSフィルターの標準はなく、現在の実装では、一度適用された特定の要素からグレースケールフィルターを削除できないようです。これは将来的には変わるかもしれませんが、今のところそれはどういうものなのでしょうか。 –

他の答えで説明したように、イメージ以外のすべての要素にグレースケールを適用します。もちろん

body *:not(img) { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
} 
 
h1 { 
 
    color: red; 
 
} 
 
img { 
 
    float: left; 
 
} 
 
p { 
 
    color: green; 
 
}

<h1>Phil is Awesome</h1> 
 
<img src="http://www.fillmurray.com/200/300" alt=""> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus, corrupti culpa suscipit, saepe voluptas eius.</p>

出典

2016-04-09 12:14:19

フィルターは、このように動作します：まず、それはすべての要素をレンダリングします、それは親からフィルタを適用します。

grayscaleは本文に設定されています。あなたのimgには再適用されません。

ソリューション：

代わりの体に適用して、必要なすべてのdiv要素に適用され、IMGを残します。

出典

2016-04-09 04:53:01

ページ全体をimg以外のグレースケールで変換することはできますか？

答えて

関連する問題