ホームページ > 記事 > ウェブフロントエンド > CSSで背景画像のグレースケールを設定する方法
#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。 CSS にはフィルター属性フィルターがあり、ぼかし、彩度、グレースケールなどの要素 (通常は img) の視覚効果を定義します。 属性構文:CSS で背景画像のグレースケールを設定する方法: [filter:grayscale(100%)] などのフィルター属性フィルターを使用して設定できます。これは、画像が完全にグレースケールに変換されることを意味します。グレースケール画像。
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();共通属性値:
<!DOCTYPE html> <html> <head> <style> img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); } </style> </head> <body> <p>图片转为黑白色:</p> <img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%"> <p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p> </body> </html>実行結果: 例 2:
<!DOCTYPE html> <html> <head> <style> img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px); } </style> </head> <body> <p>图片使用高斯模糊效果:</p> <img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%"> <p><strong>注意:</strong> Internet Explorer 不支持 filter 属性。</p> </body> </html>実行結果: (学習ビデオ共有:
css ビデオ チュートリアル)
Example 3 :<!DOCTYPE html> <html> <head> <style> img { -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */ filter: drop-shadow(8px 8px 10px red); } </style> </head> <body> <p>给图像设置一个阴影效果:</p> <img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%"> <p><strong>注意:</strong> Internet Explorer 不支持 filter 属性。</p> </body> </html>実行結果:
以上がCSSで背景画像のグレースケールを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。