css는 그림의 색상을 변경할 수 있습니다. 그림의 색상을 변경하는 방법은 다음과 같습니다. 먼저 HTML 샘플 파일을 만든 다음 그림의 속성을 "img {filter: greyscale(10)으로 설정하여 그림의 색상을 변경합니다. );}".
이 튜토리얼의 운영 환경: windows7 시스템, css3 버전, thinkpad t480 컴퓨터.
추천: "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: 회색조 필터를 사용하여 컬러 이미지를 회색조 이미지로 변경
원본 이미지:
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:
이 예 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를 사용하여 이미지의 색상을 변경할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!