CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경합니다(두 가지 방법)-CSS 튜토리얼-php.cn

CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경합니다(두 가지 방법)

藏色散人

풀어 주다： 2021-10-18 17:14:42

원래의

6047명이 탐색했습니다.

이전 글 "HTML과 CSS를 사용하여 유리/흐림 효과를 만드는 방법은 무엇인가요? 》이 기사에서는 HTML과 CSS를 사용하여 유리/흐림 효과를 만드는 방법을 소개합니다. 관심 있는 친구들이 읽고 배울 수 있습니다~

이 기사에서는 CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경하는 방법을 소개합니다. , 이는 또한 일상적인 개발 효과를 달성하는 비교적 일반적인 방법입니다.

우선 본 글에 표시된 png 이미지 자료를 다운로드 받으실 수 있습니다. 다운로드 주소 : https://www.php.cn/xiazai/sucai/1733

CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경합니다(두 가지 방법)

(원본 이미지를 다운로드 받으실 수 있습니다.) here여기)

이제 두 가지 구현 방법을 소개하겠습니다.

첫 번째 방법

이 예제에서는 회색조 필터를 사용하여 컬러 이미지를 회색조 이미지로 변경합니다.

코드는 다음과 같습니다.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        img {
            filter: grayscale(10);
        }
    </style>
</head>
 
<body>
<h2>灰度图像</h2>
<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/894/510/535/1630378968326076.png"  class="lazy"  src=
             "001.png"
      style="max-width:90%" height="250px" alt="filter applied" />
</body>
 
</html>

로그인 후 복사

효과는 다음과 같습니다.

CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경합니다(두 가지 방법)

두 번째 방법

이 예제에서는 이미지에 필터를 많이 사용합니다~

코드는 다음과 같습니다.

<!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 src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/381/888/520/1630379065886904.png"  class="lazy"  class = "image1" src=
        "001.png"
      style="max-width:90%" height="250px" alt="filter applied" />
 
<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/381/888/520/1630379065886904.png"  class="lazy"  class = "image2" src=
        "001.png"
      style="max-width:90%" height="250px" alt="filter applied" />
</body>
 
</html>

로그인 후 복사

효과는 다음과 같습니다:

CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경합니다(두 가지 방법)

여기서 중요한 속성 필터를 이해해야 합니다.

필터 속성은 요소(일반적으로 CSS를 사용하여 PNG 이미지의 색상을 빠르게 변경합니다(두 가지 방법) )의 시각적 효과(예: 흐림 및 채도)를 정의합니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!