CSS를 사용하여 이미지의 색상을 변경할 수 있나요?-CSS 튜토리얼-php.cn

CSS를 사용하여 이미지의 색상을 변경할 수 있나요?

藏色散人

풀어 주다： 2023-01-04 09:36:51

원래의

4794명이 탐색했습니다.

css는 그림의 색상을 변경할 수 있습니다. 그림의 색상을 변경하는 방법은 다음과 같습니다. 먼저 HTML 샘플 파일을 만든 다음 그림의 속성을 "img {filter: greyscale(10)으로 설정하여 그림의 색상을 변경합니다. );}".

CSS를 사용하여 이미지의 색상을 변경할 수 있나요?

이 튜토리얼의 운영 환경: windows7 시스템, css3 버전, thinkpad t480 컴퓨터.

추천: "css 비디오 튜토리얼"

css는 사진의 색상을 변경할 수 있습니다.

필터 속성은 요소(일반적으로 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 파일을 허용하고 특정 필터 요소를 지정하는 앵커를 포함할 수 있습니다.

설명: 여러 필터 함수를 필터 속성에 전달하여 요소에 여러 필터를 적용할 수 있습니다. 함수는 공백으로 구분됩니다.

예제 1: 회색조 필터를 사용하여 컬러 이미지를 회색조 이미지로 변경

원본 이미지:

CSS를 사용하여 이미지의 색상을 변경할 수 있나요?

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转换为灰度图像</title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" width="500px" height="250px" alt="filter applied" />
</body>
</body>
</html>

로그인 후 복사

Rendering:

CSS를 사용하여 이미지의 색상을 변경할 수 있나요?

이 예 2: 이 예에서는 많은 필터를 사용합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>将图像转换为不同的颜色</title>
<style>
img {  
                float:left; 
            } 
            .image1 { 
                filter: invert(100%); 
            } 
            .image2 { 
                filter: sepia(100%);    
            }
</style>
</head>
<body>
<img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image1"  width="500px" height="250px" alt="filter applied" />
          
     <img src="https://img.html.cn/upload/article/000/000/006/5d171d34606c9824.jpg" class = "image2"  width="500px" height="250px" alt="filter applied" /> 
</body>
</body>
</html>

로그인 후 복사

렌더링:

CSS를 사용하여 이미지의 색상을 변경할 수 있나요?