ホームページ > 記事 > ウェブフロントエンド > CSSを使って画像の色を変えることはできますか？
cssでは画像の色を変更することができます。画像の色を変更する方法は、まずHTMLサンプルファイルを作成し、画像の属性を「img{フィルター: greyscale(10);}" 以上です。
このチュートリアルの動作環境: Windows7 システム、css3 バージョン、thinkpad t480 コンピューター。
推奨: 「css ビデオ チュートリアル 」
css は画像の色を変更できます。
filter 属性は要素 (通常は ) の視覚効果を定義します。この属性は主に画像コンテンツに使用されます。
この属性は、Web ページ上の要素 (主に画像) にフィルター効果を適用する 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 ファイルを受け入れ、特定のフィルター要素を指定するアンカーを含めることができます。
説明: 複数のフィルター関数を filter 属性に渡すことで、要素に複数のフィルターを適用できます。関数はスペースで区切られます。
例 1: グレースケール フィルターを使用してカラー イメージをグレースケール イメージに変更する
元のイメージ:
コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转换为灰度图像</title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>レンダリング:
例 2: この例では、画像に多くのフィルターを使用します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将图像转换为不同的颜色</title>
<style>
img {
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image1" width="500px" height="250px" alt="filter applied" />
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image2" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>レンダリング:
以上がCSSを使って画像の色を変えることはできますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。