ホームページ > 記事 > ウェブフロントエンド > CSSで画像の色を変える方法
CSSで画像の色を変える方法
- 青灯夜游オリジナル
- 2021-03-09 15:25:5916091ブラウズ
CSS では、filter 属性を使用して画像の色を変更できます。たとえば、画像を白黒に設定するには「filter:grayscale(%);」を使用します。「filter: sepia( %);」で写真をセピア画像などに設定します。 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 ビデオ チュートリアル 、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 ファイルを受け入れ、特定のフィルター要素を指定するアンカーを含めることができます。
プログラミング ビデオをご覧ください。 ！
以上がCSSで画像の色を変える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：CSSで上下の間隔を設定する方法次の記事：CSSで上下の間隔を設定する方法