CSS로 이미지 색상을 변경하는 방법
- 青灯夜游원래의
- 2021-03-09 15:25:5916091검색
CSS에서는 필터 속성을 사용하여 이미지 색상을 변경할 수 있습니다. 예를 들어 "filter:grayscale(%);"를 사용하면 이미지를 흑백으로 설정할 수 있습니다. "filter: sepia(%);" 이미지를 세피아 등으로 설정합니다. 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 비디오 튜토리얼, 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 파일을 허용하고 특정 필터 요소를 지정하는 앵커를 포함할 수 있습니다.
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !
위 내용은 CSS로 이미지 색상을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!