CSSで画像のコントラストを設定する方法-CSSチュートリアル-php.cn

CSSで画像のコントラストを設定する方法

王林

リリース： 2020-11-12 09:50:24

オリジナル

2474 人が閲覧しました

CSS で画像のコントラストを設定する方法: [filter:contrast(%)] 属性を使用して、[filter:contrast(0%)] などの画像のコントラストを設定できます。フィルター属性は、ぼかし、彩度、コントラストなどの要素の視覚効果を定義します。

CSSで画像のコントラストを設定する方法

属性の紹介:

フィルター属性は、要素 (通常は

(学習ビデオの推奨: css ビデオチュートリアル)

構文:

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

ログイン後にコピー

contrast(%) 画像のコントラストを調整します。値が 0% の場合、画像は完全に黒になります。値は 100% で、画像は変更されません。値は 100% を超える可能性があり、より低い比較が使用されることを意味します。値が設定されていない場合、デフォルトは 1 です。

例:

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="UTF-8">
	<style type="text/css">
		img{
			width: 200px;
		}
		.img1{
			/*没有滤镜效果*/
			
			/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
			-webkit-filter: none; 
			filter: none;
		}
		.img2{
			/*调整元素的对比度*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter: contrast(30);
			filter: contrast(30);
		}
	</style>
	</head>
	<body>
		<div class="demo">
			<img src="1.jpg" class="img1"/>
			<img src="1.jpg" class="img2"/>
		</div>
	</body>
</html>

ログイン後にコピー

関連する推奨事項: CSS チュートリアル

以上がCSSで画像のコントラストを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。