CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경합니다(두 가지 방법)
- 藏色散人원래의
- 2021-08-31 11:12:565737검색
이전 글 "HTML과 CSS를 사용하여 유리/흐림 효과를 만드는 방법은 무엇인가요? 》이 기사에서는 HTML과 CSS를 사용하여 유리/흐림 효과를 만드는 방법을 소개합니다. 관심 있는 친구들이 읽고 배울 수 있습니다~
이 기사에서는 CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경하는 방법을 소개합니다. , 이는 또한 일상적인 개발 효과를 달성하는 비교적 일반적인 방법입니다.
우선 본 글에 표시된 png 이미지 자료를 다운로드 받으실 수 있습니다. 다운로드 주소 : https://www.php.cn/xiazai/sucai/1733
(원본 이미지를 다운로드 받으실 수 있습니다.) here여기)
이제 두 가지 구현 방법을 소개하겠습니다.
첫 번째 방법
이 예제에서는 회색조 필터를 사용하여 컬러 이미지를 회색조 이미지로 변경합니다.
코드는 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
filter: grayscale(10);
}
</style>
</head>
<body>
<h2>灰度图像</h2>
<img src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html>효과는 다음과 같습니다.
두 번째 방법
이 예제에서는 이미지에 필터를 많이 사용합니다~
코드는 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
img {
width:40%;
float:left;
}
.image1 {
filter: invert(100%);
}
.image2 {
filter: sepia(100%);
}
</style>
</head>
<body>
<img class = "image1" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
<img class = "image2" src=
"001.png"
width="500px" height="250px" alt="filter applied" />
</body>
</html> 효과는 다음과 같습니다:
여기서 중요한 속성 필터를 이해해야 합니다.
필터 속성은 요소(일반적으로 )의 시각적 효과(예: 흐림 및 채도)를 정의합니다.
Filter 속성은 주로 이미지의 시각적 효과를 설정하는 데 사용됩니다. Filter 함수에는 많은 속성 값이 있습니다. 구문은 다음과 같습니다.
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()
|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
-------------------------------------------------------------------------------
使用空格分隔多个滤镜필터는 일반적으로 백분율(예: 75%)을 사용합니다. , 물론 소수로 표시할 수도 있습니다(예: 0.75).
참고: 이전 버전의 Internet Explorer(4.0~8.0)에서 지원되는 비표준 "필터" 속성은 더 이상 사용되지 않습니다. IE8 이하 브라우저는 일반적으로 불투명도 속성을 사용합니다.
PHP 중국어 웹사이트 플랫폼에는 많은 비디오 교육 리소스가 있습니다. "css 비디오 튜토리얼"을 배우는 모든 분들을 환영합니다!
위 내용은 CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경합니다(두 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!