CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법-CSS 튜토리얼-php.cn

CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법

青灯夜游

풀어 주다： 2022-01-20 14:43:58

원래의

15729명이 탐색했습니다.

CSS에서는 필터 속성을 사용하여 이미지를 회색으로 변경할 수 있습니다. 이 속성은 이미지에 "filter: greyscale (grayscale value %)"만 추가하면 됩니다. 이미지를 회색으로 변경하는 요소입니다.

CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서는 필터 속성을 사용하여 이미지를 회색으로 변경할 수 있습니다.

filter 속성은 요소의 시각적 효과(일반적으로 CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법 )를 정의합니다. 즉, 이미지에 흐림 및 채도와 같은 필터 효과를 추가합니다.

필터 속성의 값이 greyscale(%)인 경우 이미지를 greyscale 이미지로 변환할 수 있습니다. 값은 변환 규모를 정의합니다. 값이 100%이면 이미지가 완전히 흑백으로 변환되고, 값이 0%이면 이미지가 변하지 않습니다. 0%에서 100% 사이의 값은 효과의 선형 승수입니다. 설정하지 않으면 기본값은 0입니다.

샘플 코드:

<!DOCTYPE html>
<html>
	<head>
		<style>
			.img1 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(50%);
			}
			.img2 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(70%);
			}
			.img3 {
				-webkit-filter: grayscale(100%);
				/* Chrome, Safari, Opera */
				filter: grayscale(100%);
			}
		</style>
	</head>
	<body>

		<p>设置图片的灰度:</p>

		<img  src="img/1.jpg"    style="max-width:90%" alt="CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법" >
		<img  class="img1" src="img/1.jpg"    style="max-width:90%" alt="CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법" >
		<img  class="img2" src="img/1.jpg"    style="max-width:90%" alt="CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법" >
		<img  class="img3" src="img/1.jpg"    style="max-width:90%" alt="CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법" >
	</body>
</html>

로그인 후 복사

CSS 스타일을 사용하여 이미지를 회색으로 변경하는 방법