CSS로 이미지 색상을 변경하는 방법

CSS로 이미지 색상을 변경하는 방법: 1. [mix-blend-mode] 방법을 사용하여 값을 얻습니다. 2. [Background-blend-mode: lighten] 혼합 모드를 사용하여 기본 색상을 변경합니다. 검정색에서 다른 색상으로의 이미지.

이 튜토리얼의 운영 환경: windows7 시스템, CSS3 버전, DELL G3 컴퓨터.

CSS로 이미지 색상을 변경하는 방법:

1. 먼저 mix-blend-mode

mix-blend-mode: Normal

mix 값을 살펴보겠습니다. -blend-mode: 곱하기; // Multiply

mix-blend-mode: screen; // Filter

mix-blend-mode: overlay; // Overlay

mix-blend-mode: // 어둡게 하기

mix-blend-mode: lighten; // 밝게

mix-blend-mode: color-dodge; // Color dodge

mix-blend-mode: color-burn; 모드: 하드 라이트

mix-blend-mode: 소프트 라이트

mix-blend-mode: 차이; // 차이

mix-blend-mode: 제외 ; / 제외

mix-blend-mode: 색상; // 색상

mix-blend-mode: 채도; // 채도

mix-blend-mode: 색상

mix-blend- 모드: 광도 ; //밝기

mix-blend-mode: 초기화; //Inherit

mix-blend-mode: unset; 마지막 세 개를 제외하고 ps와 같습니다.

2. 배경 혼합 모드를 사용하면 이미지 아래에 다른 색상의 추가 레이어를 겹쳐 넣을 수 있습니다. 배경 혼합 모드를 사용하면 기본 색상이 변경됩니다. 이미지를 검정색으로 변경합니다. 간단한 CSS 코드는 다음과 같습니다:

.pic {
width: 200px;
height: 200px;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}

관련 무료 학습 권장 사항:

javascript 비디오 튜토리얼

위 내용은 CSS로 이미지 색상을 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!