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

CSSでPNG画像の色を変更する方法

青灯夜游

リリース： 2023-01-05 16:10:41

オリジナル

5575 人が閲覧しました

CSS の filter 属性を invert()、grayscale()、sepia()、または hue-rotate() 関数とともに使用して、PNG カラーを変更できます。hue-rotate() は色相の回転を設定します。 Grayscale() はグレーの度合いを調整し、sepia() はセピア画像を設定します。

CSSでPNG画像の色を変更する方法

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

CSS の Filter 属性を使用すると、フィルター機能を使用して画像の色を変更できます。CSS の Filter 属性は主に画像の視覚効果を設定するために使用されます。

filter 属性は要素 (通常は CSSでPNG画像の色を変更する方法 ) の視覚効果を定義します。この属性は主に画像コンテンツに使用されます。

この属性は、Web ページ上の要素 (主に画像) にフィルター効果を適用する CSS メソッドです。

関連属性値:

grayscale(): 要素の色を白黒に変換する要素のグレースケールを設定します。グレースケール 0% は元の要素を表し、100% は完全なグレースケール要素を表します。
sepia(): 画像をセピア画像に変換します。0% は元の画像を意味し、100% は完全なセピアを意味します。
hue-rotate(): 画像に色相の回転を適用します。この値は、画像サンプルのカラーサークルが調整される度合いを定義します。デフォルト値は元の画像を表す 0deg で、この値に最大値はありませんが、360deg を超える値は再び一周することと同じになります。
invert(): 要素を反転します。デフォルト値は 0% で、元のイメージを表します。 100% にすると、画像が完全に反転します。

コード例: filter 属性を使用して画像の色を変更する

<!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">原图：<br />
			<img  src="img/1.jpg" / alt="CSSでPNG画像の色を変更する方法" >
			
		</div><br /><br />
		<div class="demo">应用滤镜，改变颜色后：<br />
			<img  src="img/1.jpg" class="img1" / alt="CSSでPNG画像の色を変更する方法" >
			<img  src="img/1.jpg" class="img2" / alt="CSSでPNG画像の色を変更する方法" >
			<img  src="img/1.jpg" class="img3" / alt="CSSでPNG画像の色を変更する方法" >
			<img  src="img/1.jpg" class="img4" / alt="CSSでPNG画像の色を変更する方法" >
		</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

CSSでPNG画像の色を変更する方法

# #例 2: この例では、画像に多くのフィルターを使用します

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>将图像转换为不同的颜色</title>
		<style>
			img {  
                float:left; 
            	-webkit-filter: invert(100%) sepia(100%);
                filter: invert(100%) sepia(100%);   
            }
		</style>
	</head>

	<body>
	 <img  src="img/1.jpg"    style="max-width:90%"/ alt="CSSでPNG画像の色を変更する方法" >
	</body>
	</body>

</html>

ログイン後にコピー

レンダリング:

CSSでPNG画像の色を変更する方法