반투명 CSS 배경입니다. HTML 및 CSS에서 투명한 배경 만들기(불투명도 및 RGBA 효과)

오늘은 텍스트 블록의 투명한 배경, 만드는 방법, 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로 설정합니다.

텍스트 텍스트 텍스트, 많은, 많은 텍스트

본문(배경: url(image.jpg);)
#block_bg(
위치: 상대;
오버플로: 숨김;
너비: 400px;
패딩: 10px;
}
#block_text (위치: 상대; Z-색인: 100;)
#block_transparent(
불투명도: 0.5;
필터: 알파(불투명도 = 50);
-moz-불투명도: 0.5;
배경: #fff;
위치: 절대;
상단: 0;
왼쪽: 0;
z-인덱스: 90;
높이: 5000px;
너비: 400px;
}

투명 블록(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)으로 설정되면 허용 가능한 가장 가까운 값으로 축소됩니다.

background 속성을 예로 들어 보겠습니다(원하는 경우 색상이나 테두리를 사용할 수 있음).

배경: RGB(0, 0, 255); / * 순수한 파란색 * /
배경: RGB(100%, 50%, 0%); / * 순수한 파란색 * /
배경: rgb(10, 145, 500); / *는 10, 145, 255로 인식됩니다 * /
배경: rgba(10, 145, 255, 1); / * 이전과 동일 * /
배경: rgba(100, 50, 255, 0.1); / * 매우 투명한 라일락 색조 * /

예, 속성과 여는 괄호 사이에 공백을 넣을 수 없으며 같은 줄에 일부 값을 일반 숫자로, 다른 값을 백분율로 설정할 수 없다는 것을 잊었습니다. 이 작업을 수행하면 아무 것도 작동하지 않습니다.

hsl과 hsl

그리고 hsl과 hsla에 대한 몇 마디. 의 값은 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가지 속성 모두 donkey 및 이전 브라우저에서 지원되지 않습니다.

완성

일반적으로 CSS3는 다른 매우 유용한 기능을 제공하지만 항상 그렇듯이 IE는 진행의 주요 제동 장치입니다. 클라이언트 사이트의 경우 지금은 사용을 자제하고(여전히 두뇌를 헛되이 견딜 것입니다) PNG를 사용하는 옵션을 선택할 것입니다. 그리고 귀하의 사이트에서 - 왜 안 될까요? 특히 당나귀나 어떤 고대 조각에 앉지 않은 상급자들이 방문한다면 더욱 그렇습니다.

CSS3의 출현으로 레이아웃 디자이너의 작업은 훨씬 더 쉽고 논리적이 되었습니다. 결국 이제 점점 더 적은 JavaScript를 사용하여 모든 개체를 실제로 유연하게 사용자 정의할 수 있습니다. 배경의 투명도를 조정해야 한다고 가정해 보겠습니다. CSS는 즉시 여러 옵션을 제공합니다.

배경은 background-repeat, background-attachment, background-origin, background-clip, background-color) 속성의 집합으로 설정되며, 각각 별도로 작성하거나 background 속성 아래에 결합할 수 있습니다. 각각에 대해 자세히 살펴보겠습니다.

배경색 속성

IE8도 이 방법을 지원합니다. 유동적 레이아웃의 배경으로 여러 이미지가 사용됩니다. 가장 중요한 것은 이미지가 사용자에게 로드되지 않을 수 있으므로 이미지를 사용할 때 CSS에서 배경색을 설정하는 것을 잊지 마십시오.

배경 위치 속성

이미지를 사용하여 블록의 배경을 설정하는 경우 CSS를 사용하면 화면의 아무 곳에나 이미지를 배치할 수 있습니다. 기본적으로 이미지는 왼쪽 상단 모서리에 있습니다. 속성은 구두 표시(위, 아래, 왼쪽, 오른쪽) 또는 숫자 표시(백분율, 픽셀 및 기타 단위)를 허용합니다. 이 경우 가로 및 세로의 두 값을 지정해야 합니다.

body (background-position: right center;) - 이 예에서 배경은 페이지의 오른쪽에 위치하며, 이미지까지의 상하 거리는 동일합니다.

배경 크기 속성

때로는 CSS를 사용하여 배경 크기를 늘리거나 줄여야 합니다. 이렇게 하려면 background-size 속성을 사용하고 배경 크기는 픽셀이나 백분율 및 기타 측정 단위로 설정할 수 있습니다.

이 속성에는 몇 가지 문제가 있습니다. 이전 버전의 브라우저에서 배경을 올바르게 표시하려면 접두사를 사용해야 합니다. 물론이야, 현재 버전이 속성을 완전히 지원하고 특정 속성에 대한 필요성이 사라졌습니다.

배경 첨부 속성

이 속성은 배경 이미지의 스크롤 동작을 지정합니다. 따라서 3개의 값을 사용할 수 있습니다(이 기사에 제공된 모든 속성에 공통적인 상속 제외).

결정된- 배경의 그림을 움직이지 않게 만듭니다.
스크롤- 배경은 나머지 요소와 함께 스크롤됩니다.
현지의- 콘텐츠에 스크롤이 있는 경우 배경 이미지가 스크롤됩니다. 콘텐츠를 넘어선 배경이 캡처됩니다.

사용 예:

본문(배경 첨부 고정).

Firefox는 현재 후자의 속성(로컬)을 지원하지 않습니다.

배경 출처 속성

이 속성은 요소의 위치를 지정합니다. 브라우저 초기 버전접두사를 사용해야 합니다. 속성 자체에는 세 가지 매개변수가 있습니다.

패딩 박스프레임의 두께를 고려하면서 가장자리를 기준으로 배경을 배치합니다.
테두리 상자경계선이 배경을 완전히 또는 부분적으로 겹칠 수 있다는 점에서 이전 속성과 다릅니다.
콘텐츠 상자콘텐츠에 바인딩하여 이미지를 배치합니다.

여러 값이 주어지면 브라우저는 다르게 반응할 수 있습니다. Firefox와 Opera는 첫 번째 옵션만 허용합니다.

백그라운드 반복 속성

일반적으로 배경이 이미지로 정의된 경우 가로 또는 세로로 반복되어야 합니다. 이것이 background-repeat 속성의 용도입니다. 따라서 CSS에 이러한 속성이 포함된 블록의 배경에는 여러 매개변수 중 하나가 있을 수 있습니다.

반복 금지- 이미지는 단일 버전으로 페이지에 나타납니다.
반복하다- 배경은 x 및 y 축을 따라 반복됩니다.
반복 x- 수평으로만;
반복- 수직으로만;
우주- 배경이 반복되지만 공간을 채울 수 없으면 그림 사이에 공백이 나타납니다.
둥근- 전체 사진으로 전체 영역을 채울 수 없는 경우 이미지가 축소됩니다.

속성 사용의 예:

body (background-repeat: 반복 없음)- 유사하게 background-repeat: 반복-y.

CSS3에서는 쉼표로 구분된 매개변수를 나열하여 여러 이미지에 대한 값을 설정할 수 있습니다.

배경 클립 속성

이 속성은 테두리 아래의 배경 동작을 결정합니다(예: 점선 테두리의 경우).

패딩 박스- 배경은 블록 내부에 엄격하게 표시됩니다.
테두리 상자- 이미지가 프레임 아래로 이동합니다.
콘텐츠 상자- 배경의 그림은 콘텐츠 내부에만 나타납니다.

사용 예:

본문(background-clip: content-box;).

Chrom 및 Safari에는 -webkit- 접두사가 필요합니다.

불투명도 및 필터 속성

opacity 속성을 사용하면 배경의 투명도를 설정할 수 있습니다. CSS 속성은 모든 브라우저에서 작동합니다. 값은 0.0에서 1.0까지의 범위에서 설정됩니다. 이를 통해 투명도를 설정할 수 있습니다. CSS 배경정수 값 없이: 0.3 대신 3을 쓰면 충분합니다.

.block(배경 이미지: url(img.png), 불투명도: .3;).

CSS가 버전 9 미만인 IE에도 적합한 배경의 투명도를 설정하려면 filter 속성을 사용하십시오.

.block(배경 이미지: url(img.png), 필터: 알파(불투명도 = 30);).

이 경우 opacity 값은 0에서 100 사이의 범위로 설정됩니다. opacity 속성은 상속에서 RGBA를 사용하는 opacity 설정과 다릅니다. opacity를 사용하면 배경뿐만 아니라 블록 내부의 모든 요소도 투명해집니다. .

항상 CIS 및 기타 모든 국가의 브라우저 사용 통계를 따르십시오. 모든 레이아웃 디자이너의 가장 큰 문제는 이전 버전의 IE이며 CSS3의 전체 사용을 허용하지 않습니다. 코딩할 때 브라우저가 CSS 속성을 지원하는지 확인하는 특수 서비스를 사용하는 것을 잊지 마십시오. 이전 버전의 브라우저를 설치할 수 없는 경우 다음에서 사이트의 작동을 확인하는 서비스를 찾으십시오. 다른 브라우저온라인.

일

모든 내용이 반투명한 블록 요소를 만듭니다.

해결책

요소의 불투명도를 변경하려면 0에서 1 사이의 값으로 opacity 스타일 속성을 사용합니다. 여기서 0은 전체 투명도에 해당하고 1은 반대로 개체의 불투명도에 해당합니다. V 인터넷 브라우저 Explorer는 이 속성을 작동하지 않으므로 CSS 사양의 일부가 아닌 속성에 대해 특별히 필터를 사용해야 합니다. 예 1은 모든 브라우저에 대해 레이어 투명도를 설정하는 방법을 보여줍니다.

실시예 1. 반투명층

HTML5 CSS 2.1 IE Cr Op Sa Fx

반투명 레이어

분명히, 보간법이 약간의 관심으로 Dirichlet 적분을 왜곡하여 바보의 꿈이 이루어진 것이 확인되었습니다. 진술은 완전히 입증되었습니다.

결과 이 예그림에 나와 있습니다. 1.

쌀. 1. 반투명층 사파리 브라우저

필터 속성은 치수 중 하나 이상이 설정되거나(너비 또는 높이) 요소가 절대 위치(위치: 절대)로 설정된 요소에만 투명도를 추가합니다.

또한 투명도는 하위 항목을 포함하여 레이어의 전체 내용에 영향을 미치며 불투명도를 변경하여 해당 항목의 불투명도 수준을 높일 수 없습니다. 레이어의 불투명도가 0.7로 설정된 예제 1에서 레이어 내부의 텍스트는 동일한 값을 얻습니다. 적게 설정하는 것은 허용되지만 텍스트는 투명도 값 0.7을 초과할 수 없습니다.

요소의 반투명 효과는 배경 이미지에서 명확하게 볼 수 있으며 다른 영역에서 널리 퍼졌습니다. 운영체제세련되고 아름답게 보이기 때문입니다. 웹 디자인에서 투명도는 불투명도 속성이나 배경에 대해 설정된 RGBA 색상 형식을 통해 적용되고 구현됩니다.

불투명도 속성

이 속성의 주요 특징은 투명도 값이 배경뿐만 아니라 내부의 모든 자식에 영향을 미친다는 것입니다. 즉, 배경과 텍스트가 모두 반투명해지고 추가하여 투명도 수준을 높일 수 없습니다. 테이블 1은 불투명도 값이 다른 텍스트와 배경의 모양을 보여줍니다.

예제 1은 불투명도를 사용하여 반투명 블록을 만드는 방법을 보여줍니다.

예 1. 웹 페이지의 배경

HTML5 CSS3 IE 9+ Cr Op Sa Fx

불투명

RGBA

일반적으로 디자인에 따라 요소의 배경만 반투명해야 하며 텍스트는 가독성을 유지하기 위해 불투명해야 합니다. 요소 내부의 텍스트도 부분적으로 투명하기 때문에 opacity 속성은 적절하지 않습니다. 알파 채널이 일부인 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에서 요소의 투명도를 변경하는 세 가지 방법이 있습니다.
불투명도 속성을 사용하여
rgba() 함수를 사용하여,
hsla() 함수를 사용합니다.

1. 불투명도 속성

opacity 속성을 사용하면 웹 페이지의 모든 요소를 부분적으로 또는 완전히 투명하게 만들 수 있습니다. 이 속성은 배경 이미지(그림)가 있는 요소 또는 색상이나 그라디언트가 있는 배경의 투명도를 변경합니다. opacity 속성이 적용된 요소에 다른 요소가 포함되어 있으면 해당 요소도 불투명도를 변경합니다.
opacity 속성의 범위는 0(완전히 투명)에서 1(불투명)까지입니다. 예를 들면 다음과 같습니다.

H1(색상: # CD6829;) div(배경: # CDD6DB; 불투명도: .3;)
쌀. 1. 불투명도를 사용한 요소의 투명도

2. rgba() 함수

RGBA 색상 모델은 필요한 비율로 혼합하여 색상 캐스트를 만듭니다. 레드(레드), 녹색(녹색)그리고 블루(블루)색상 및 알파 채널(알파)색상의 투명도를 담당합니다. opacity 속성과 달리 다른 요소를 포함하는 블록의 경우 rgba() 함수는 블록의 불투명도만 변경합니다.

쌀. 2. RGB 색상 모델 h1(색상: # CD6829;) div(배경: rgba(205, 214, 219, 0.3);)

쌀. 3. rgba() 함수를 사용한 요소의 투명도

3. hsla() 함수

매개변수가 의미하는 Hsla() 함수 톤(색조), 포화, 밝기(밝기)그리고 알파 채널(알파), 반투명 색상을 설정할 수도 있습니다.

색상 색조는 색상환의 해당 값을 사용하여 백분율로 지정됩니다. 원 자체는 경계에 기본 색상이 있는 섹터로 나뉩니다.

0/360 ° - 빨간색
60 ° - 노란색
120 ° - 녹색
180 ° - 파란색
240 ° - 파란색
270 ° - 보라색
300°는 마젠타색입니다.