ホームページ > 記事 > ウェブフロントエンド > CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)
CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)
- 藏色散人オリジナル
- 2021-08-31 11:12:565807ブラウズ
前回の記事「HTMLとCSSを使ってガラス・ぼかし効果を作るには？」 >>この記事では、HTML と CSS を使用してガラス/ぼかし効果を作成する方法を紹介します。興味のある友達は読んで学ぶことができます~
この記事では、CSS を使用してガラス/ぼかし効果をすばやく作成する方法を紹介します。 PNG 画像を変更する、カラー、これも日常の開発で一般的なエフェクトの実装方法です。
まずは、この記事で紹介しているPNG画像素材をダウンロードできます。ダウンロードアドレス: https://www.php.cn/xiazai/sucai/1733
(元の画像は ここ からダウンロードできます)
次に、2 つの実装方法を紹介します。
最初の方法
この例では、グレースケール フィルターを使用して、カラー イメージをグレースケール イメージに変更します。
コードは次のとおりです:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<h2>灰度图像</h2>
<img src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>効果は次のとおりです:
##2 番目のメソッド
この例では、画像に多くのフィルターを使用しています~コードは次のとおりです:<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
width:40%;
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img class = "image1" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
<img class = "image2" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>効果は次のとおりです:
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜Filters は通常使用しますパーセンテージ (例: 75%)、もちろん、小数として表現することもできます (例: 0.75)。 注: Internet Explorer の古いバージョン (4.0 ～ 8.0) でサポートされている非標準の「フィルター」属性は非推奨になりました。 IE8 以前のブラウザでは通常、opacity 属性が使用されます。 PHP 中国語 Web サイト プラットフォームには、多くのビデオ教育リソースがあります。皆さんも「以上がCSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。