前回の記事「HTMLとCSSを使ってガラス・ぼかし効果を作るには？」 >>この記事では、HTML と CSS を使用してガラス/ぼかし効果を作成する方法を紹介します。興味のある友達は読んで学ぶことができます~
この記事では、CSS を使用してガラス/ぼかし効果をすばやく作成する方法を紹介します。 PNG 画像を変更する、カラー、これも日常の開発で一般的なエフェクトの実装方法です。
まずは、この記事で紹介しているPNG画像素材をダウンロードできます。ダウンロードアドレス: https://www.php.cn/xiazai/sucai/1733
(元の画像は ここ からダウンロードできます)
次に、2 つの実装方法を紹介します。
最初の方法
この例では、グレースケール フィルターを使用して、カラー イメージをグレースケール イメージに変更します。
コードは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<h2>灰度图像</h2>
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/894/510/535/1630378968326076.png" class="lazy" src=
"001.png"
style="max-width:90%" height="250px" alt="filter applied" />
</body>
</html>
|
ログイン後にコピー
効果は次のとおりです:
##2 番目のメソッド
この例では、画像に多くのフィルターを使用しています~
コードは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!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 src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/381/888/520/1630379065886904.png" class="lazy" class = "image1" src=
"001.png"
style="max-width:90%" height="250px" alt="filter applied" />
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/381/888/520/1630379065886904.png" class="lazy" class = "image2" src=
"001.png"
style="max-width:90%" height="250px" alt="filter applied" />
</body>
</html>
|
ログイン後にコピー
効果は次のとおりです:
ここで誰もが理解しておく必要がある重要な属性フィルター:
フィルター属性は、要素 (通常は
) の視覚効果 (例: ぼかしや彩度) を定義します。
Filter 属性は主に画像の視覚効果を設定するために使用されます。Filter 関数には多くの属性値があります。構文は次のとおりです:
1 2 3 4 | 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 ビデオ チュートリアル 」を学習してください。
以上がCSS を使用して PNG 画像の色をすばやく変更する (2 つの方法)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
