집 > 기사 > 웹 프론트엔드 > CSS에서 이미지의 대비를 설정하는 방법

CSS에서 이미지의 대비를 설정하는 방법

王林원래의: 2020-11-12 09:50:242472검색

CSS에서 이미지 대비를 설정하는 방법: [filter:contrast(%)] 속성을 사용하여 [filter:contrast(0%)]와 같이 이미지의 대비를 설정할 수 있습니다. 필터 속성은 흐림, 채도, 대비 등과 같은 요소의 시각적 효과를 정의합니다.

속성 소개:

filter 속성은 요소(일반적으로 a1f02c36ba31691bcfe87b2722de723b)의 시각적 효과(예: 흐림 및 채도)를 정의합니다.

(학습 영상 추천: 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에서 이미지의 대비를 설정하는 방법

관련 기사