CSSを使って画像の色を変えることはできますか？-CSSチュートリアル-php.cn

CSSを使って画像の色を変えることはできますか？

藏色散人

リリース： 2023-01-04 09:36:51

オリジナル

4815 人が閲覧しました

cssでは画像の色を変更することができます。画像の色を変更する方法は、まずHTMLサンプルファイルを作成し、画像の属性を「img{フィルター: greyscale(10);}" 以上です。

CSSを使って画像の色を変えることはできますか？

このチュートリアルの動作環境: Windows7 システム、css3 バージョン、thinkpad t480 コンピューター。

推奨: 「css ビデオチュートリアル」

css は画像の色を変更できます。

filter 属性は要素 (通常は CSSを使って画像の色を変えることはできますか？ ) の視覚効果を定義します。この属性は主に画像コンテンツに使用されます。

この属性は、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: グレースケールフィルターを使用してカラーイメージをグレースケールイメージに変更する

元のイメージ:

CSSを使って画像の色を変えることはできますか？

コード:

<!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>

ログイン後にコピー

レンダリング:

CSSを使って画像の色を変えることはできますか？

例 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を使って画像の色を変えることはできますか？