CSS로 이미지 색상을 변경하는 방법-CSS 튜토리얼-php.cn

CSS로 이미지 색상을 변경하는 방법

青灯夜游

풀어 주다： 2023-01-03 09:28:42

원래의

16150명이 탐색했습니다.

CSS에서는 필터 속성을 사용하여 이미지 색상을 변경할 수 있습니다. 예를 들어 "filter:grayscale(%);"를 사용하면 이미지를 흑백으로 설정할 수 있습니다. "filter: sepia(%);" 이미지를 세피아 등으로 설정합니다. CSS의 필터 속성은 주로 이미지의 시각적 효과를 설정하는 데 사용됩니다.

CSS로 이미지 색상을 변경하는 방법

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

CSS의 필터 속성을 사용하면 Photoshop과 같은 필터 효과를 이미지에 적용하여 이미지 색상을 변경할 수 있습니다.

<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="UTF-8">
	<style type="text/css">
		img{
			width: 300px;
		}
		.img1{
			/*元素的灰度*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter: grayscale(100%);
			filter: grayscale(100%);
		}
		.img2{
			/*将图像转换为棕褐色图像*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter: sepia(100%);
			filter: sepia(100%);
		}

		.img3{
			/*色调旋转*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter:hue-rotate(55deg);
			filter: hue-rotate(55deg);
		}
		.img4{
			/*反转元素*/
			
			/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
			-webkit-filter: invert(100%); 
			filter: invert(100%); 
		}
	</style>
	</head>
	<body>
		<div class="demo">
			<img  src="img/1.jpg" class="img1"/ alt="CSS로 이미지 색상을 변경하는 방법" >
			<img  src="img/1.jpg" class="img2"/ alt="CSS로 이미지 색상을 변경하는 방법" >
			<img  src="img/1.jpg" class="img3"/ alt="CSS로 이미지 색상을 변경하는 방법" >
			<img  src="img/1.jpg" class="img4"/ alt="CSS로 이미지 색상을 변경하는 방법" >
		</div>
	</body>
</html>

로그인 후 복사

원본 사진:

CSS로 이미지 색상을 변경하는 방법

필터 속성을 사용하여 색상 변경

CSS로 이미지 색상을 변경하는 방법

[추천 튜토리얼: CSS 비디오 튜토리얼, html 비디오 튜토리얼]

CSS 필터 속성

CSS 필터 속성 주로 이미지의 시각적 효과를 설정하는 데 사용됩니다.

구문:

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

로그인 후 복사

필터 기능

참고: 필터는 일반적으로 백분율(예: 75%)을 사용하지만 소수(예: 0.75)로 표시할 수도 있습니다.

none: 기본값이며 효과가 적용되지 않습니다.
brightness(): 요소의 밝기를 설정합니다. 밝기가 0%이면 완전히 검은색이고, 밝기가 100%이면 원래 밝기와 동일합니다. 100%보다 큰 값은 요소가 더 밝아집니다.
grayscale(): 요소 색상을 흑백으로 변환하는 요소의 회색조를 설정합니다. 그레이스케일 0%는 원래 요소를 나타내고, 100%는 완전한 그레이스케일 요소를 나타냅니다.
sepia(): 이미지를 세피아 이미지로 변환합니다. 여기서 0%는 원본 이미지를 의미하고 100%는 전체 세피아를 의미합니다.
contrast(): 요소의 대비를 조정하는 데 사용됩니다. 대비 0%는 완전한 검은색 요소를 나타내고, 대비 100%는 원본 요소를 나타냅니다.
saturate(): 요소의 채도를 설정하는 데 사용됩니다. 채도 0%는 요소가 완전히 불포화되었음을 의미하고, 채도 100%는 원본 이미지를 의미합니다. 결과의 100%보다 큰 값은 과포화 요소입니다.
blur(): 요소에 흐림 효과를 적용합니다. 퍼지 값이 지정되지 않은 경우 기본값은 0입니다.
opacity(): 이미지의 불투명도 효과를 설정합니다. 불투명도가 0%이면 요소가 완전히 투명하다는 의미이고, 불투명도가 100%이면 원본 이미지를 의미합니다.
hue-rotate(): 이미지에 색조 회전을 적용합니다. 이 값은 이미지 샘플의 색상환이 조정되는 정도를 정의합니다. 기본값은 0deg이며 이는 원본 이미지를 나타냅니다. 이 값에는 최대값이 없지만 360deg를 초과하는 값은 다시 돌아가는 것과 같습니다.
invert(): 요소를 반전시킵니다. 기본값은 0%이며 이는 원본 이미지를 나타냅니다. 100%는 이미지를 완전히 반전시킵니다.
drop-shadow(): 요소에 그림자 효과를 적용합니다. h-그림자, v-그림자, 흐림, 확산 및 색상을 값으로 허용합니다.
url(): SVG 필터를 설정하는 XML 파일을 허용하고 특정 필터 요소를 지정하는 앵커를 포함할 수 있습니다.