CSS3 を使用してグレースケール フィルターを記述し、白黒の写真効果を作成する方法の紹介

この記事では、CSS3 を使用して白黒写真効果を作成するためのグレースケール フィルターを作成する方法を主に紹介します。この記事では、IE と互換性のある方法も紹介します。

CSS3 フィルター機能を使用すると、PhotoShop を使用したり、大量の JavaScript や PHP コードを使用したりせずに、画像を簡単かつ便利に処理できます。この属性は、新しい Firefox、Safari、Chrome ブラウザですでにサポートされており、包括的な代替テクノロジ (IE ブラウザも含む) を通じてこの効果をシミュレートできます。

この記事では、Lena Söderberg の標準テスト画像 (翻訳者注: Lena の美しい写真が画像圧縮の標準テスト画像として使用されています) をデモンストレーションとして使用し、CSS を使用して白黒画像に変換します。以下では、CSS のこの機能を使用して色相、ぼかし、明るさ、コントラスト、その他の効果を調整する方法を説明します。レンダリング:

CSS3 グレースケール フィルター

CSS3 を使用して画像の色を薄めるのは、これまで以上に簡単です。この CSS ステートメントをクラスとして記述することができるため、目的の効果を持つ画像が見つかったときにクラスを直接追加できます。

img.desaturate { filter: grayscale(100%); }

もちろん、現在のブラウザが CSS3 を使用する場合、ブラウザ機能に独自の実験的なプレフィックスを追加する必要があるため、最初に行う必要があるのはブラウザのプレフィックスを記述することです:

img.desaturate { filter: grayscale(100%);   
-webkit-filter: grayscale(100%);   
-moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%);   
-o-filter: grayscale(100%);   
}

特定の写真に使用したい場合は、非常に簡単です。クラスを追加するだけです:

<img src=lena-söderberg.png alt="Lena Söderberg" style=width:512px;height:512px class=desaturate>

それだけです。 ## SVG フィルター効果を追加します。この機能は現在 Chrome 18 以降でのみ利用可能ですが、他のブラウザでも間もなくサポートが追加される予定です。 Firefox 4 以降で同じ効果を得るには、SVG フィルターを使用する必要がある場合があります。次のコードを含む新しい別のファイル saturate.svg を作成しました:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">   
<filter id="greyscale">   
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0  0  0  1 0"/>   
</filter>   
</svg>

この SVG コードに怖気づく必要はありません - ただし、上記の行列シーケンスは少し複雑です。このコードをコピーして、一般的な「小さなファイル」に直接貼り付けることをお勧めします。上記のマトリックスの変更については、別の記事で詳しく紹介するので、ここでは詳しく説明しません。 上記の SVG ファイル参照を追加すると、HTML ページに挿入する CSS コードは次のとおりです:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
}

IE との互換性:

これで、私たちのコードは将来のブラウザーおよび最新バージョンと互換性が得られます。 Chrome、Firefox 4 以降。 IE 6 ～ 9 を互換性リストに追加するには、Microsoft の使いにくいが効果的なフィルターを使用する必要があります:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
filter: gray;   
}

それでも古いバージョンの Webkit カーネル ブラウザと互換性を持たせたい場合:

img.desaturate{   
filter: grayscale(100%);   
-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);   
-ms-filter: grayscale(100%); -o-filter: grayscale(100%);   
filter: url(desaturate.svg#greyscale);   
filter: gray;   
-webkit-filter: grayscale(1);   
}

すべてのブラウザでこの視覚効果を実現したい場合は (訪問者が JavaScript をサポートしていると仮定して)、jQuery または Greyscale.js を使用して画像を変更し、色を消すことができます。

上で書いた CSS コードを使用すると、PhotoShop を使用せずに画像を白黒に変えることができます。 CSS を使用してこの機能を実装すると、変更が非常に簡単になります。たとえば、脱色パラメータを 100% から 50% に変更すると、画像に原色と白黒のブレンドの効果が現れることがわかります。

その他の効果:

さらに、白黒写真に他のフィルター効果を追加できます:

-webkit-filter:blur(5px);  //模糊，此处为5像素   

-webkit-filter:sepia(0.5);  //叠加褐色，取值范围0-1，此处表示50%的褐色   

-webkit-filter:brightness(0.5);  //亮度，取值范围0-1，5倍亮度（数字为0时为正常样式，为1时表示的是100%亮度，无法看到图片）   

-webkit-filter:hue-rotate(30deg); //色相（按照色相环进行旋转，顺时针方向，红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红）此处为叠加黄色滤镜   

-webkit-filter:invert(1);  //反色，取值范围0-1,0为原图，1为彻底反色之后，0.5为灰色   

-webkit-filter:saturate(4);  //饱和度，取值范围0~*,0为无饱和度，1为原图，值越高饱和度越大   

-webkit-filter:contrast(2);  //对比度，取值范围0~*,0为无对比度（灰色），1为原图，值越高对比度越大   

-webkit-filter:opacity(0.8);  //透明度，取值范围0~1,0为全透明，1为原图   

-webkit-filter:drop-shadow(17px 17px 20px black); //阴影

以上がCSS3 を使用してグレースケール フィルターを記述し、白黒の写真効果を作成する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。