CSSスタイルを使用して画像をグレーに変更する方法-CSSチュートリアル-php.cn

CSSスタイルを使用して画像をグレーに変更する方法

青灯夜游

リリース： 2022-01-20 14:43:58

オリジナル

15729 人が閲覧しました

CSS では、filter 属性を使用して画像をグレーに変更できます。この属性は画像にフィルター効果を追加できます。「filter: greyscale (grayscale value %);」を追加するだけです。 style を画像要素に設定します。これにより、画像がグレーに設定されます。

CSSスタイルを使用して画像をグレーに変更する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS では、filter 属性を使用して画像をグレーに変更できます。

filter 属性は、要素 (通常は CSSスタイルを使用して画像をグレーに変更する方法 ) の視覚効果を定義します。つまり、ぼかしや彩度などのフィルター効果を画像に追加します。

filter属性の値がgrayscale(%)の場合、画像をグレースケール画像に変換できます。値は変換のスケールを定義します。値が 100% の場合、画像は完全にグレースケールに変換され、値が 0% の場合、画像は変更されません。 0% から 100% までの値は、効果の線形乗数です。設定されていない場合、値はデフォルトで 0 になります。

サンプルコード:

<!DOCTYPE html>
<html>
	<head>
		<style>
			.img1 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(50%);
			}
			.img2 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(70%);
			}
			.img3 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(100%);
			}
		</style>
	</head>
	<body>

		<p>设置图片的灰度:</p>

		<img  src="img/1.jpg"    style="max-width:90%" alt="CSSスタイルを使用して画像をグレーに変更する方法" >
		<img  class="img1" src="img/1.jpg"    style="max-width:90%" alt="CSSスタイルを使用して画像をグレーに変更する方法" >
		<img  class="img2" src="img/1.jpg"    style="max-width:90%" alt="CSSスタイルを使用して画像をグレーに変更する方法" >
		<img  class="img3" src="img/1.jpg"    style="max-width:90%" alt="CSSスタイルを使用して画像をグレーに変更する方法" >
	</body>
</html>

ログイン後にコピー

CSSスタイルを使用して画像をグレーに変更する方法