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 사이의 실수를 지정하여 간단히 지정됩니다. 숫자가 낮을수록 물체가 눈에 덜 띄게 됩니다.
웹사이트에서 배경 투명도를 설정하는 두 번째 옵션은 CSS 속성 background:rgba입니다. 예를 살펴 보겠습니다.
글씨도 투명해요
이 코드는 페이지에서 다음과 같이 변환됩니다.
두 방법의 차이점은 불투명도를 사용하면 블록 내부의 텍스트가 투명해진다는 것입니다.
두 번째 경우에는 그런 문제가 없습니다. 따라서 상황을 살펴볼 필요가 있습니다. 정확히 무엇을 기대하고 있습니까?
요소의 반투명 효과는 배경 이미지에서 명확하게 볼 수 있으며 세련되고 아름답게 보이기 때문에 다양한 운영 체제에서 널리 사용됩니다. 웹 디자인에서는 반투명도 사용되며 불투명도 속성이나 배경에 설정된 RGBA 색상 형식을 통해 달성됩니다.
불투명도 속성
이 속성의 주요 특징은 투명도 값이 배경뿐만 아니라 그 안에 있는 모든 하위 요소에 영향을 미친다는 것입니다. 즉, 배경과 텍스트가 모두 반투명해지며 . 테이블에 그림 1은 불투명도 값이 서로 다른 텍스트와 배경의 모양을 보여줍니다.
예제 1에서는 불투명도를 사용하여 반투명 블록을 만드는 방법을 보여줍니다.
예 1: 웹페이지의 배경
HTML5 CSS3 IE 9+ Cr Op Sa Fx
불투명
RGBA
일반적으로 디자인에 따라 요소의 배경만 반투명해야 하며 텍스트는 가독성을 유지하기 위해 불투명해야 합니다. 요소 내부의 텍스트도 부분적으로 투명하므로 불투명도 속성은 여기에 적합하지 않습니다. 알파 채널, 즉 투명도 값이 일부로 포함된 RGBA 형식을 사용하는 것이 가장 좋습니다. 값은 rgba 로 기록되며 빨간색, 파란색 및 녹색 색상 구성 요소의 값은 괄호 안에 쉼표로 구분되어 나열됩니다. 마지막은 투명도인데 0부터 1까지 설정됩니다(그림 1). 0은 완전한 투명도를 의미하고 1은 색상의 불투명도를 의미합니다.
쌀. 1. rgba 사용 구문
예제 2에서는 RGBA 형식을 사용하여 반투명 배경을 만드는 방법을 보여줍니다.
예시 2. 반투명 배경
HTML5 CSS3 IE 9+ Cr Op Sa Fx
RGBA
홉스는 심리학의 관점에서 이 문제를 최초로 부각한 사람 중 한 명이었습니다.
이 예의 결과는 그림 1에 나와 있습니다. 2. 배경 불투명도는 90%로 설정됩니다.
쌀. 2. 반투명 배경과 불투명 텍스트
CSS에서 투명 효과를 만들기 위해 opacity 속성이 사용됩니다.
IE8 및 이전 버전은 대체 속성인 filter:alpha(opacity=x) 를 지원합니다. 여기서 " x "의 범위는 0 ~ 100 이며 값이 낮을수록 요소가 더 투명해집니다.
다른 모든 브라우저는 0.0에서 1.0 사이의 숫자를 값으로 사용할 수 있는 표준 CSS 속성 opacity를 지원합니다. 값이 낮을수록 요소는 더 투명해집니다.
문서 이름
노력하다 "
호버 시 투명성
pseudo-class:hover를 사용하면 마우스 커서로 요소 위로 마우스를 가져갈 때 요소의 모양을 변경할 수 있습니다. 이 기능을 사용하여 이미지 위로 마우스를 가져갈 때 이미지의 투명도가 사라지도록 합니다.
문서 이름
노력하다 "
배경 투명도
요소를 투명하게 만드는 방법에는 위에서 설명한 불투명도 속성과 RGBA 형식으로 배경색을 지정하는 두 가지 방법이 있습니다.
여러분은 이미 RGB 색상 표현 모델에 익숙할 것입니다. RGB(Red, Green, Blue - 빨간색, 녹색, 파란색)는 빨간색, 녹색, 파란색을 혼합하여 색상을 결정하는 색상 시스템입니다. 예를 들어 텍스트 색상을 노란색으로 설정하려면 다음 선언 중 하나를 사용할 수 있습니다.
색상: rgb(255,255,0); 색상: rgb(100%,100%,0);
RGB를 사용하여 지정된 색상은 알파 투명도 채널을 사용할 수 있다는 점에서 이전에 사용한 16진수 값과 다릅니다. 즉, 알파 투명도가 있는 요소의 배경을 통해 그 아래에 있는 내용이 표시됩니다.
RGBA 색상 선언은 표준 RGB 규칙과 구문이 유사합니다. 그러나 값을 RGBA(RGB 대신)로 선언하고 색상 값 뒤에 0.0(완전 투명)과 1(완전 불투명) 사이의 추가 십진 투명도 값을 지정해야 합니다.
참고: IE8 이하에서는 RGBA 값이 지원되지 않습니다. 알파 색상 값을 지원하지 않는 이전 브라우저에 대한 대체 색상을 선언하려면 먼저 RGBA 값 앞에 이를 지정해야 합니다. background: rgb(255,255,0); 배경: rgba(255,255,0,0.5);
오늘 나는 텍스트 블록의 투명한 배경, 그것을 만드는 방법, CSS3가 이를 위해 제공하는 것에 대해 이야기하고 싶습니다. rgba 및 hsla로 넘어가기 전에 텍스트가 있는 블록에 반투명 배경을 사용하는 예를 살펴보겠습니다. 또는 이것이 어떻게 달성되고 어떤 문제가 발생하는지 살펴보겠습니다. 데모를 위해 우리는 Java의 일부 프로그램에 의해 처리된 이 그림과 불행히도 오래 전에 손실된 링크를 사용할 것입니다.
아래 그림을보세요. 반투명 블록에 텍스트를 오버레이하려는 그래픽 배경이 있습니다. 이상적으로는 사진에서 2번이 나와야 하는데 가끔 3번이 나오는 경우도 있습니다.. 불량이 하나 더 있는데 조금 아래쪽에서 구두로 말씀드리도록 하겠습니다. 스크린샷을 찍을 방법이 없었습니다.
rgba와 hsla가 없는 반투명 배경
반투명 PNG. 최선의 선택이기 때문에 오늘날 그것은 가장 크로스 브라우저이며 가장 쉬운 브라우저입니다. 블록을 투명하게 만들려면 블록 배경으로 설정된 1픽셀 반투명 PNG가 필요합니다. 그게 다야. 결함: 하나만 필요합니다.
불투명도를 통한 투명성. 블록 투명도는 다음과 같이 브라우저 간 설정됩니다.
불투명도:0.5; 필터:알파(불투명도=50); -moz-불투명도:0.5;
여기서 0.5와 50은 50% 투명도입니다. 그러나 문제가 있습니다. 그러한 반투명도를 가져야 하는 블록을 설정하면 위 이미지에서 세 번째 옵션을 볼 수 있습니다. 블록의 내용도 반투명해집니다. 그러나 다른 블록이 텍스트 블록 아래에 배치되어 반투명이 부여되는 자유로운 위치 지정 방법이 있습니다.
예를 살펴보겠습니다. 주황색 이미지가 있는 블록을 텍스트와 투명한 배경을 모두 포함하는 컨테이너(#block_bg), 내부에 반투명 배경이 있는 블록 #block_transparent 및 텍스트가 있는 블록(#block_text)인 본문 태그로 설정합니다.
투명 블록(라인 19)의 너비를 설정해야 합니다. 그렇지 않으면 1픽셀로 축소되고 일반 블록(라인 5)의 너비는 축소됩니다. 그렇지 않으면 텍스트가 투명 블록 너머로 확장됩니다. 텍스트의 너비를 설정할 수 있지만 근본적인 차이는 없습니다). 텍스트와 투명 블록의 가장자리를 들여쓰기 위해 여섯 번째 줄에 패딩을 사용합니다. 투명도의 높이를 조정할 수 있도록 높이를 더 높이고(라인 18) 공통 블록에 중첩을 제공합니다(라인 4). 그래서 우리는 모든 것을 하나의 블록에 넣었고, 이는 흥미로운 배경이 있는 페이지의 어느 부분에든 삽입할 수 있습니다. 예, 일반 블록 block_bg에 배경을 추가하고 싶을 수도 있지만 그렇게 하지 않는 것이 좋습니다. 인생을 더 어렵게 만들 것입니다(물론 작업에 따라 다름). 즉, 이 전체 구조를 별도의 블록으로 푸시하는 것이 더 낫습니다. 이 블록에는 패딩을 제공할 수 있으므로 걱정할 필요가 없습니다. 결함: 너무 번거롭다.
rgb 및 hsl, rgba 및 hsla – CSS3 속성
보다 정확하게는 이는 정확히 속성이 아닙니다. 이는 배경, 색상, 테두리 등과 같은 속성에 대한 색상을 설정하는 새로운 기능입니다.
속성의 이름은 RGB 색상 시스템(빨간색, 녹색, 파란색)과 HSL(색조, 채도, 밝기)에서 유래되었습니다. 첫 번째 시스템은 빨간색, 녹색, 파란색의 기본 색상을 혼합하여 색 공간을 설명합니다. 두 번째 시스템에서 색상 구성 요소는 인간에게 더 친숙한 형태로 색상에 대한 정보를 표시합니다. 이 색상은 무엇입니까? 얼마나 포화 상태입니까? 얼마나 밝습니까, 아니면 어둡습니까?
RGB와 RGBA
RGB와 RGBA부터 시작해 보겠습니다. r, g, b의 값은 0~255 또는 0%~100%로 설정할 수 있다. a(알파, 투명도) 값은 0에서 1까지 측정됩니다(분수 값은 0.4, 0.7 등의 점을 통해 지정됩니다). r, g, b를 허용 가능한 범위보다 큰 값(예: 300, 110% 또는 -5)으로 설정하면 가장 가까운 허용 가능한 값으로 축소됩니다.
배경 속성을 예로 들어 모든 것을 살펴보겠습니다(원하는 경우 색상이나 테두리를 선택할 수도 있음).
예, 속성과 여는 괄호 사이에 공백을 넣을 수 없으며 같은 줄에 일부 값을 일반 숫자로 설정하고 다른 값을 백분율로 설정할 수 없다는 점을 잊어버렸습니다. 이렇게 하면 아무것도 작동하지 않습니다.
hsl과 hsla
그리고 hsl과 hsla에 대해 몇 마디 말씀드리겠습니다. a의 값은 rgb 및 rgba와 동일한 방식으로 설정되지만 처음 세 매개변수의 경우 상황이 약간 다릅니다. h는 0~360까지 설정할 수 있고, s와 l은 0%~100%까지 설정할 수 있다.
그리고 가장 중요한 것. RGB에서 머리의 색상을 결정하는 것이 매우 어려운 경우(거의 항상 스포이드가 있는 타사 프로그램이 필요함) 여기에서는 모든 것이 제자리에 있도록 눈 앞에 하나의 그림을 두는 것으로 충분합니다. 그림은 h 매개변수의 음영을 보여줍니다.
필요한 색상을 추정하려면 음영을 선택한 다음 s, 색상 채도(0%는 불포화 색상(회색 톤), 100%는 가장 채도가 높음) 및 밝기(0% - 색상은 항상 검은색이어야 하고 100% - 흰색이어야 합니다). 위 사진을 기준으로 채도 100%, 명도 50%에서의 밝은 톤을 표현한 사진입니다.
이제 전체 색 공간이 한 눈에 머릿속에 들어옵니다. 물론 수동 선택이 피펫을 대체하는 것은 아니며 모든 사람이 머리에 "색 공간"을 가질 필요는 없지만 때로는 필요한 것이 무엇인지 빠르게 파악하고 테스트하기 위해 적합합니다.
그리고 말 그대로 몇 가지 예
배경: hsl(180, 100%, 50%); /*풍부한 파란색*/ 배경: hsla(140, 50%, 30%, 0.5); /*반투명하고 거의 눈에 띄지 않는 녹색 음영*/
결함: 당나귀 및 이전 브라우저에서는 4가지 속성이 모두 지원되지 않습니다.
완성
일반적으로 CSS3는 몇 가지 매우 유용한 기능을 제공하지만 언제나 그렇듯이 IE는 진행에 있어 주요 제동 장치입니다. 클라이언트 사이트의 경우 지금은 사용을 자제하고(내 두뇌를 헛되이 낭비하게 될 것입니다) PNG를 사용하는 옵션을 선택하겠습니다. 그리고 귀하의 웹사이트에서는 - 왜 안되겠습니까? 특히 당나귀 나 고대의 파편에 앉아 있지 않은 고급 사람들이 방문하는 경우.
좋은 하루 되세요. 웹 개발 전문가이자 초보자이시죠. IT 트렌드나 웹 패션을 따르지 않는 사람들을 위해 "CSS 도구를 사용하여 투명한 블록을 만드는 방법"이라는 주제에 대한 이 간행물이 귀하에게 적합하다는 것을 엄숙히 알려드립니다. 실제로 2016년 현재 온라인 서비스에 다양한 투명 객체를 도입하는 것은 세련된 움직임으로 평가된다.
따라서 이 기사에서는 고대 솔루션부터 시작하여 투명성을 생성하는 기존의 모든 방법에 대해 설명하고 솔루션과 브라우저의 호환성에 중점을 두고 프로그램 코드의 구체적인 예도 제공합니다. 이제 일하러 가자!
방법 1. 대홍수 이전
컴퓨터가 아직 약하고 '능력'이 개발되지 않았을 때 개발자들은 투명한 배경을 만드는 자신만의 방법을 고안했습니다. 즉, 투명한 픽셀과 컬러 픽셀을 차례로 사용하는 것입니다. 이렇게 만들어진 블록은 크기를 조정하면 체스판처럼 보였지만, 보통 크기에서는 일종의 투명함을 닮았습니다.
제 생각에는 "목발"이 최신 솔루션이 작동하지 않는 이전 버전의 브라우저에서 확실히 도움이 되는 것 같습니다. 그러나 텍스트 표시 품질은 주목할 가치가 있습니다. ,
그런 식으로 새겨지면 급격히 떨어집니다.
방법 2. 신경 쓰지 않음
드문 경우지만, 개발자는 기성 반투명 이미지를 삽입하여 반투명 이미지 도입 문제를 해결합니다! 이를 위해 PNG-24 형식으로 저장된 이미지가 사용됩니다. 이 그래픽 형식을 사용하면 256단계의 반투명도를 설정할 수 있습니다.