web-dev-qa-db-ja.com

CSSを使用してWebページ全体をグレースケールに変換することは可能ですか？

ウェブサイト全体をグレースケールにしたいと思います。もちろん、CSSを手動で編集して、すべてのcolor、background-color＆coを調整することもできます。プロパティで、Photoshopですべての画像を調整できます。

しかし、もっと簡単な方法はありますか？純粋なCSSを使用して？

たとえば、100％x 100％のオーバーレイdivをサイトの上部に配置して、すべての色をグレースケールに変換するなどですか。

ヒントはありますか？

csscolorsgrayscale
16
Golo Roden

すべての要素にフィルターを設定する必要はありませんHTMLにフィルターを適用できます。

html {
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}

または、HTMLで色付きの背景を維持したい場合は本文。

http://codepen.io/anon/pen/VLawaK

10
G-Cyr

はい、あります。フィルターグレースケールを使用してください。

[〜＃〜] css [〜＃〜]

*{
    -moz-filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* IE6-9 */
    filter: grayscale(100%);
}

注：これは任意の要素（html、本文、ヘッダーなど）に適用できます。

ここでデモ

25
Luís P. A.