CSSで画像の色を変える方法-CSSチュートリアル-php.cn

CSSで画像の色を変える方法

青灯夜游

リリース： 2023-01-03 09:28:42

オリジナル

16146 人が閲覧しました

CSS では、filter 属性を使用して画像の色を変更できます。たとえば、画像を白黒に設定するには「filter:grayscale(%);」を使用します。「filter: sepia( %);」で写真をセピア画像などに設定します。 CSS のフィルタープロパティは主に画像の視覚効果を設定するために使用されます。

CSSで画像の色を変える方法

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

CSS の filter 属性を使用すると、Photoshop のようなフィルター効果を画像に適用して、画像の色を変更できます。

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="UTF-8">
	<style type="text/css">
		img{
			width: 300px;
		}
		.img1{
			/*元素的灰度*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
		}
		.img2{
			/*将图像转换为棕褐色图像*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter: sepia(100%);
			filter: sepia(100%);
		}

		.img3{
			/*色调旋转*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter:hue-rotate(55deg);
			filter: hue-rotate(55deg);
		}
		.img4{
			/*反转元素*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter: invert(100%); 
			filter: invert(100%); 
		}
	</style>
	</head>
	<body>
		<div class="demo">
			<img  src="img/1.jpg" class="img1"/ alt="CSSで画像の色を変える方法" >
			<img  src="img/1.jpg" class="img2"/ alt="CSSで画像の色を変える方法" >
			<img  src="img/1.jpg" class="img3"/ alt="CSSで画像の色を変える方法" >
			<img  src="img/1.jpg" class="img4"/ alt="CSSで画像の色を変える方法" >
		</div>
	</body>
</html>

ログイン後にコピー

元の画像:

CSSで画像の色を変える方法

##フィルター属性を使用して色を変更します

CSSで画像の色を変える方法

[推奨チュートリアル] :

CSS ビデオチュートリアル、html ビデオチュートリアル ]

CSS フィルター属性

CSS のフィルター属性が主に使用されます画像の視覚効果を設定します。

構文:

filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();

ログイン後にコピー

フィルター関数

注: フィルターでは通常、パーセンテージ (75% など) が使用されますが、もちろん、小数で表すこともできます (例: ：0.75）。

none: これはデフォルト値であり、効果は適用されません。
brightness(): 要素の明るさを設定します。明るさが 0% の場合は完全に黒になり、明るさが 100% の場合は元の明るさと同じになります。 100% を超える値を指定すると、要素が明るくなります。
grayscale(): 要素のグレースケールを設定し、要素の色を白黒に変換します。グレースケール 0% は元の要素を表し、100% は完全なグレースケール要素を表します。
sepia(): 画像をセピア画像に変換します。0% は元の画像を意味し、100% は完全なセピアを意味します。
contrast(): 要素のコントラストを調整するために使用されます。コントラスト 0% は完全な黒い要素を意味し、コントラスト 100% は元の要素を意味します。
saturate(): 要素の彩度を設定するために使用されます。彩度 0% は要素が完全に飽和していないことを意味し、彩度 100% は元の画像を意味します。結果の 100% を超える値は過飽和要素です。
blur(): 要素にぼかし効果を適用します。ファジー値が指定されていない場合、デフォルト値は 0 です。
opacity(): 画像の不透明効果を設定します。不透明度 0% は要素が完全に透明であることを意味し、不透明度が 100% の場合は元の画像を意味します。
hue-rotate(): 画像に色相の回転を適用します。この値は、画像サンプルのカラーサークルが調整される度合いを定義します。デフォルト値は元の画像を表す 0deg で、この値に最大値はありませんが、360deg を超える値は再び一周することと同じになります。
invert(): 要素を反転します。デフォルト値は 0% で、元のイメージを表します。 100% にすると、画像が完全に反転します。
drop-shadow(): 要素にシャドウ効果を適用します。 h-shadow、v-shadow、blur、spread、color を値として受け入れます。
url(): SVG フィルターを設定する XML ファイルを受け入れ、特定のフィルター要素を指定するアンカーを含めることができます。