ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)
前回の記事「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 属性は主に画像の視覚効果を設定するために使用されます。Filter 関数には多くの属性値があります。構文は次のとおりです:
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 サイトの他の関連記事を参照してください。