CSS에서 배경 이미지 투명도를 설정하는 방법은 무엇입니까? 반투명 배경 양식에서 배경을 투명하게 만드는 방법

예를 들어 웹 사이트에 삽입하는 등의 경우 인터넷에서 적합한 이미지를 찾을 수 있는 경우가 많습니다. 아니면 콜라주를 만들고 있는데 하나의 그림에 다른 그림을 추가해야 할 수도 있습니다. 그러나 필요한 이미지에는 일반적으로 일종의 배경이 있습니다.

어떻게 할 수 있는지 알아봅시다 편집기를 사용하여 그림의 투명한 배경 만들기어도비 벽돌포토샵. Adobe Photoshop CS5 영어 버전이 설치되어 있어서 보여드리겠습니다.

다양한 단축키 조합을 제공하도록 노력하겠습니다.

아직 포토샵이 설치되어 있지 않거나 거의 사용하지 않거나 영어로 되어 있다면 Paint.net에서 투명한 배경을 만들 수 있습니다. 이것은 하드 드라이브의 공간을 많이 차지하지 않는 간단한 러시아어 이미지 편집기입니다. 링크를 클릭하시면 자세한 기사를 보실 수 있습니다. Paint.net 프로그램은 당사 웹사이트에서 다운로드할 수 있습니다.

먼저 간단한 예를 살펴보겠습니다. 평범한 배경에 이미지가 있다고 가정해 보겠습니다. 이미지는 로고나 이름일 수 있습니다. Photoshop에서 투명한 배경에 이 로고나 비문을 만들어 보겠습니다.

편집기에서 원하는 이미지를 엽니다. 이제 레이어의 투명한 배경을 만들어 보겠습니다. "레이어" 창에서 추가된 레이어를 두 번 클릭합니다. 반대편에 자물쇠가 표시됩니다. "새 레이어" 창이 열리면 "확인"을 클릭하세요. 그 후에는 잠금이 사라집니다.

"마법봉" 도구를 선택하세요. 속성 표시줄에서 민감도 수준을 지정하고 작동 방식을 이해하기 위한 다양한 값(예: 20 및 100)을 설정합니다. 그림을 선택 취소하려면 "Ctrl+D"를 누릅니다.

감도를 설정하고 마술봉으로 배경 영역을 클릭하세요. 선택하지 않은 부분을 선택한 배경에 추가하려면 "Shift"를 누른 채 계속 선택하세요. 선택한 영역을 삭제하려면 "삭제"를 클릭하세요.

이제 배경 대신 체스판이 있습니다. 이는 흰색 배경을 투명하게 만들 수 있다는 의미입니다. 선택 항목 제거 – “Ctrl+D”.

다양한 색상과 개체가 포함된 이미지나 사진이 있는 경우 Photoshop에서 이미지의 투명한 배경을 만드는 방법을 살펴보겠습니다.

이 경우 빠른 선택 도구를 사용하겠습니다. 약간의 지연을 두고 마우스 왼쪽 버튼으로 마술 지팡이를 클릭하고 메뉴에서 원하는 도구를 선택합니다.

이제 투명한 배경에 남겨두려는 개체를 선택해야 합니다. 속성 표시줄에서 다양한 크기를 설정하고 개체를 클릭하여 영역을 추가합니다. 실수로 불필요한 배경을 선택한 경우 "Alt"를 눌러 제거하세요.

결과를 보려면 "Q"를 누르세요. 투명해지는 이미지 부분은 분홍색으로 강조 표시됩니다.

Ctrl+C를 눌러 선택한 영역을 복사합니다. 다음으로 배경이 투명한 새 파일 "Ctrl+N"을 만듭니다.

복사한 부분을 "Ctrl + V"로 붙여넣으세요. 배경에 불필요한 부분이 남아 있다면 지우개 도구를 사용하여 제거하세요. 투명한 배경에서 촬영한 이미지는 PNG 또는 GIF 형식으로 저장됩니다.

사진의 흰색 배경을 투명하게 만들거나 Photoshop에서 컬러 이미지나 사진의 개별 조각에 대해 투명한 배경을 만듭니다. 그런 다음 필요할 때 사용할 수 있습니다. 웹사이트에 삽입하거나, 다른 그림에 추가하거나, 흥미로운 콜라주를 만들 수 있습니다.

CSS 배경 투명도

사이트 배경의 투명도는 CSS 속성을 통해 생성됩니다. opacity 속성과 background:rgba()를 통해 두 가지 방법으로 투명도를 얻을 수 있습니다. 각각 살펴보고 비교해 보겠습니다.

1. 배경 투명도를 위한 CSS 불투명도 속성

CSS에는 배경을 포함한 이미지, 텍스트의 투명도를 설정하는 데 사용할 수 있는 불투명도 속성이 있습니다.

투명도는 0.0에서 1.0 사이의 실수를 지정하여 간단히 지정됩니다. 숫자가 낮을수록 물체가 눈에 덜 띄게 됩니다.

불투명도: 0.5; // 반투명도 불투명도: 0.2; // 객체는 불투명도 20%에서만 표시됩니다: 0.8; // 객체는 80%만 보입니다.

불투명도 속성의 예를 살펴보겠습니다.

글씨도 투명해요