ホームページ > 記事 > ウェブフロントエンド > CSSで画像の色を変える方法
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）。
プログラミング ビデオをご覧ください。 ！
以上がCSSで画像の色を変える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
