CSS3 を使用してグレースケールフィルターを記述し、白黒の写真効果を作成します-CSSチュートリアル-php.cn

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

不言

リリース： 2018-06-25 17:17:29

オリジナル

2575 人が閲覧しました

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

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

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

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); //阴影

ログイン後にコピー

以上がこの記事の全内容です、皆さんの学習に役立つことを願っています。その他の関連コンテンツにも注目してください。