コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS3でカラー画像を白黒画像に変更する方法

CSS3でカラー画像を白黒画像に変更する方法

青灯夜游
リリース： 2021-11-09 15:55:42
オリジナル
2597 人が閲覧しました

CSS3 では、filter 属性を使用してカラー画像を白黒画像に変更できます。この属性の値を「grayscale(%)」に設定するだけです。具体的な構文形式は「img」です。 {フィルター:グレースケール (100%)}」。

CSS3でカラー画像を白黒画像に変更する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS3 では、filter 属性を使用してカラー画像を白黒画像に変更できます。この属性の値を "grayscale(%)" に設定するだけです。

filter 属性は、要素 (通常は CSS3でカラー画像を白黒画像に変更する方法) の視覚効果 (例: ぼかし、彩度、グレースケール) を定義します。

grayscale(%) : 画像をグレースケールに変換します。値は変換のスケールを定義します。値が 100% の場合、画像は完全にグレースケールに変換され、値が 0% の場合、画像は変更されません。 0% から 100% までの値は、効果の線形乗数です。設定されていない場合、値はデフォルトの 0 になります。

例: 

<!DOCTYPE html>
<html>
	<head>
		<style>
			.img{filter:grayscale(100%)}
		</style>
	</head>

	<body>
		<img  src="img/1.jpg"    style="max-width:90%" / alt="CSS3でカラー画像を白黒画像に変更する方法" >
		<img  src="img/1.jpg"    style="max-width:90%" class="img"/ alt="CSS3でカラー画像を白黒画像に変更する方法" >
	</body>
</html>
ログイン後にコピー

レンダリング:

CSS3でカラー画像を白黒画像に変更する方法

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3でカラー画像を白黒画像に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css3 写真 フィルター
ソース：php.cn
前の記事：CSSでdivの最大高さを設定する方法 次の記事：CSSマウスポインタを画像スタイルに設定する方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページをモバイル対応にしますか? たくさんの Web ページといくつかの Web サイトがあります。問題は、私は初心者だということです。基本的な html5 と css3 を使用していますが、それらをスケールアップ...
から 2024-04-01 20:42:38
0
1
259
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート