독창적이고 밝고 현대적인 디자인으로 페이지를 만드는 방법을 배우고 싶습니까? 반투명 요소를 사용하면 이 어려운 문제를 해결하는 데 도움이 될 수 있습니다. 오늘은 주요 내용을 살펴보겠습니다. 실용적인 방법구조 요소의 투명도 설정.

투명도를 설정하는 방법은 무엇입니까?

웹 기술의 역사적 발전이라는 프리즘을 통해 이 주제를 고려하면 다음과 같은 접근 방식을 구분할 수 있습니다.

• 재산 불투명.
• 용법 PNG-영화
• 시스템 형식 RGBA
• 글쎄, 마지막으로 고대 또는 체크 무늬 이미지입니다.

CSS 불투명도 속성

스타일 적용 CSS속성 불투명적용되는 요소의 투명도를 설정할 수 있습니다. 인수로 사용할 수 있는 값은 0부터 1까지이다.
예를 살펴보겠습니다.

< html> < head> < title>TODO 제목 제공 < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " >여기에는 많은 텍스트가 있을 것입니다.

/* 페이지 본문의 배경 */) . 투명(패딩: 10px; /*텍스트 들여쓰기*/배경: 어두운 청록색; /* 배경색 설정 */여백: 0 자동; /* 블록을 중앙에 배치 */너비: 50%; /* 블록 너비 설정 */불투명도: 0.7 ; /* 투명도 설정 */글꼴: 48px/ 64px Times New Roman; 텍스트 정렬: 양쪽 정렬; )

결과적으로 우리는 반투명 블록을 얻었습니다.

중요한!!!

1. 불투명 0(완전 투명도) – 1(불투명도) 범위의 값을 사용합니다.
2. 브라우저 간 호환성. 안에 즉.버전 7까지 포함 불투명지원되지 않습니다. 다음 줄은 요소의 동일한 표시를 달성하는 데 도움이 됩니다.

   필터: alpha(불투명도= 70 ) ;

   부동산이라는 점을 고려해 볼 가치가 있습니다. 필터에서 누락 HTML사양에 따라 값이 1에서 100까지 변경되며 요소에만 적용할 수 있습니다.

   • 절대 위치 지정( 위치: 절대)
   • 고정된 선형 크기( 높이 또는 너비).
3. 투명도는 하위 요소에 상속되며, 하위 요소는 투명도를 높일 수 있지만 낮출 수는 없습니다. 즉, 반투명 배경에 NOT TRANSPARENT 텍스트를 만들 수 없습니다.

마지막 단락의 내용을 더 잘 이해하기 위해 이전 예에서는 텍스트 색상을 흰색으로 설정했습니다.

색상: 흰색;

현미경으로 살펴보세요.

보시다시피 블록(텍스트)의 내용도 반투명해졌습니다. 하지만 실제로 콘텐츠의 투명성에는 관심이 없고 배경의 투명성에만 관심이 있다면 어떻게 될까요? 이 경우 다음 항목으로 넘어갑니다.

PNG 이미지 사용

형식의 흥미로운 특징 PNG 256단계의 투명도를 가지고 있다는 것입니다. 나는 당신이 생각의 흐름을 잡았다고 생각하며 아마도 이 접근 방식이 어떻게 작동하는지에 대한 알고리즘을 이미 구축했을 것입니다. 내가 할 수 있는 건 목소리를 내는 것뿐이다.

결과적으로 우리는 투명한 배경과 불투명한 내용을 가진 블록을 얻었습니다.

중요한!!!

1. 부동산과는 다르게 불투명투명도는 배경에만 설정됩니다
2. 브라우저 간 호환성. 거의 모든 브라우저에서 작동하며 이는 장점입니다. 하지만 투명성 PNG에서는 지원되지 않습니다 IE6. 그러한 고대 시대에 맞게 사이트를 최적화하려면 다른 방법이나 스크립트를 사용해야 합니다.
3. 사진 표시를 끄면 배경이 사라집니다(사진 표시를 최적화할 때 이 점을 고려하십시오). 모바일 장치, 결국 무제한 인터넷항상 손에 가지고 있지는 않습니다.)
4. 색상 및/또는 투명도를 변경하려면 새 이미지를 생성하여 서버에 업로드해야 합니다.

RGBA 시스템 형식

배경의 투명도를 변경하는 가장 현대적인 방법 중 하나는 시스템을 사용하는 것입니다. RGBA.

RGBA– 3개의 표준 채널을 이용한 색상 표현 시스템 RGB(빨간색, 녹색, 파란색), 네 번째는 소위 알파-투명도를 특성화하는 채널.

배경: rgba(r, g, b, a) ;

이미 알려진 예에서는 다음의 내용을 바꿉니다. CSS다음에 파일을 제출하세요:

본문( 배경: url(./vaden-pro-logo.png) ; /* 배경 이미지 */) . prozrachen ( 패딩: 10px; 배경: rgba(0 , 206 , 209 , 0.7 ) ; 여백: 0 자동; 너비: 50%; 글꼴: 48px/ 64px Times New Roman; 색상: 흰색; 텍스트 정렬: 양쪽 맞춤; )

중요한!!!

1. 부동산과는 다르게 불투명투명도는 배경에만 설정됩니다
2. 방법과는 다르게 PNG그림에서 색상이나 투명도를 변경하려면 값만 변경하면 됩니다. RGBA.
3. 브라우저 간 호환성. 모두에서 작동 최신 브라우저(으로 시작하는 IE9, Op10, FX3,SF3.2).구형 브라우저의 경우 투명성을 희생하거나 다음을 사용해야 합니다. 불투명, png행동 양식.

체크 무늬 이미지 또는 역사와 관련하여

이 방법은 웹 디자인의 원조였으며 실제로 아무것도 할 수 없는 낡고 오래된 브라우저를 보았습니다. 색상이 있는 사각형과 투명한 사각형이 번갈아 나타나는 체크무늬 배경을 만드는 것으로 구성됩니다.

이러한 이미지를 배경으로 사용한 결과, 의사투명 배경이 얻어졌다.

중요한!!!

1. 이러한 배경에서 텍스트를 보면 눈이 빨리 피로해질 수 있습니다(스크롤할 때의 잔물결이 특히 심합니다).
2. 그 외에는 응용 프로그램 기능이 "PNG 이미지" 방식과 유사합니다.

요약해볼까요?

• 투명한 블록 아래에는 밝고 단조롭지 않은 그림이 있어야 합니다. 단색 배경에서는 투명도의 하이라이트가 손실됩니다.
• 구체적인 실용적인 접근 방식을 선택할 때는 귀하가 사용하는 브라우저에 따라 결정하세요. 타겟 청중. 브라우저 간 호환성이 중요합니다.

CSS에서 투명한 색상을 설정하는 방법은 무엇입니까? 현재 이를 수행하는 방법에는 3가지가 있습니다.

방법 1 - 투명한 값

텍스트나 배경색의 값을 transparent 로 설정하면 색상이 완전히 투명해집니다. 즉, 보이지 않습니다. 예:

색상: 투명;

이러한 텍스트는 페이지에 표시되지 않습니다.

방법 2 - RGBA 색상 모드

그리고 이것은 CSS3 혁신입니다. 이전에는 웹 개발에 이러한 모드가 없었고 RGB만 있었습니다. 확실히 당신은 이 형식으로 색상을 기록하는 방법을 알고 있습니다. 이렇게 하려면 세 가지 기본 색상(빨간색, 녹색, 파란색) 중 하나의 채도를 나타내는 0에서 255까지 괄호 안에 세 가지 값을 지정해야 합니다. 예를 들어:

배경: rgb(230, 121, 156);

rgba 형식도 다르지 않습니다. 단지 네 번째 값(0에서 1까지의 요소 투명도)을 추가할 뿐입니다. 일반적으로 이 기록 형식은 완전히 투명하기보다는 반투명 색상을 설정하는 데 주로 사용됩니다. 완전한 투명성을 얻으려면 네 번째 값으로 0을 쓰면 됩니다.

배경: rgba(0, 0, 0, 0);

이 경우 나머지 3자리 숫자는 특별한 역할을 하지 않습니다.

4번째 파라미터를 0.01~0.99 사이의 값으로 설정하면 반투명 색상을 설정할 수 있습니다. 나는 이미 에서 배경의 반투명도 설정에 대해 조금 썼습니다. 관심이 있다면 읽어보실 수 있습니다.

방법 3 - 불투명도

CSS3 기술의 또 다른 속성입니다. 하지만 조금 다르게 작동한다는 점을 즉시 경고하고 싶습니다. 불투명도를 사용하면 투명도가 적용되는 전체 블록에 투명도가 설정됩니다. 따라서 텍스트의 가독성이 떨어지고 그림의 인식이 저하됩니다. 따라서 텍스트나 기타 정보가 포함되지 않은 블록에 대해서만 이 속성을 사용하는 것이 중요하다고 봅니다. rgba 형식으로 색상을 지정할 때 네 번째 매개변수와 마찬가지로 값은 0부터 1까지 설정할 수 있습니다.

일반적으로 이 순간이것이 CSS에서 투명한 색상을 설정하는 방법입니다. 이것이 필요한 이유는 또 다른 질문입니다. 투명한 배경을 통해 그 아래에 무엇이 있는지 볼 수 있습니다. 때로는 설계상 이런 방식으로 수행되어야 합니다. 일반적으로 반투명 기법은 오늘날 매우 일반적입니다.

투명한 배경

아시다시피 배경은 배경색을 설정하거나 배경으로 사용할 이미지를 로드할 수 있는 CSS 속성입니다.

CSS 배경의 투명도 설정

따라서 이 모든 작업은 rgba와 같은 컬러 기록 형식 덕분에 매우 간단하게 수행됩니다. 당신이 함께 일하고 있다면 그래픽 편집자, 그렇다면 아마 당신도 그걸 알고 있을 겁니다 색상 모드 rgb는 빨간색(빨간색)의 비율, 녹색(녹색) 및 파란색(파란색)의 비율을 나타냅니다. 따라서 rgba는 거의 동일하며 투명도라는 매개 변수가 하나만 추가됩니다. 다음과 같이 작성되었습니다.

배경색: rgba(173, 57, 22, 0.5)

먼저 rgba 모드에서 색상을 설정한다는 것을 명시적으로 나타냅니다. 그런 다음 0에서 255까지 세 가지 기본 색상의 채도 값을 표시합니다. 여기서 255가 가장 높은 채도입니다. 네 번째 매개변수는 투명성입니다. 여기에는 0부터 1까지의 값이 기록됩니다. 1은 완전히 불투명한 요소이고, 0은 완전히 투명한 요소입니다. 따라서 0으로 설정하면 배경색이 전혀 보이지 않게 됩니다.

이제 CSS에서 배경 속성을 투명도로 설정하는 방법을 알았습니다. 이렇게 하려면 rgba 색상 모드를 사용해야 합니다. 불투명도 속성도 있지만 전체 요소에 전체적으로 적용됩니다. 즉, 불투명도를 적용하면 텍스트에 투명도가 적용되어 읽을 수 없게 될 수 있습니다.

투명한 배경 예시

반투명 배경의 장점은 예를 통해 쉽게 확인할 수 있습니다. 예를 들어 일반적인 페이지 배경이 있습니다. 단색 검정색이 주어진 경우 블록의 모습은 다음과 같습니다.

이제 블록에 동일한 검정색을 설정하되, 예를 들어 마지막 값을 0.7로 지정하여 rgba 색상 형식을 사용하여 지정해 보겠습니다. 다음과 같이 나타납니다.

이제 블록의 배경이 반투명해 보입니다. 배경 그림. 이 사진과 배경은 예시일 뿐입니다. 상상할 수 있듯이 CSS에서 배경 투명도는 다른 레이어에 있는 다른 배경을 가리지 않고 중첩된 요소의 배경을 표시하려는 경우 유용할 수 있습니다.

RGBA를 사용하여 색상 자체를 설정하는 것은 어렵지 않습니다. 이미 언급했듯이 처음 세 글자는 빨간색, 녹색, 파란색 또는 그 비율(0에서 255까지)의 세 가지 기본 색상을 의미합니다. 다른 값을 설정하면 수백만 가지의 다양한 색상을 얻을 수 있으며, 반투명도를 사용하면 필요한 경우 사이트에 훨씬 더 아름다운 효과를 낼 수 있습니다.

1점 2점 3점 4점 5점

세부사항 카테고리: 웹 디자이너 저자: SEO & WEB - KELL4

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

반투명 효과요소는 배경 이미지에서 명확하게 볼 수 있으며 다양한 분야에서 널리 퍼져 있습니다. 운영체제세련되고 아름다워 보이기 때문입니다. 가장 중요한 것은 반투명 블록 아래에 단색 패턴이 아니라 이미지를 갖는 것인데, 이 경우 투명도가 눈에 띄게 됩니다.

이 효과가 달성됩니다 다른 방법들, PNG 이미지를 배경으로 사용, 체크무늬 이미지 생성 및 불투명도 속성과 같은 구식 기술을 포함합니다. 그러나 블록에서 반투명 배경을 만들어야 할 필요성이 발생하자마자 이러한 방법에는 불쾌한 단점이 있습니다.

텍스트와 배경의 반투명성을 살펴보겠습니다. 웹사이트 디자인에서 이를 올바르게 사용하는 방법은 다음과 같습니다.

이 속성의 주요 특징은 투명도 값이 배경뿐만 아니라 그 안에 있는 모든 하위 요소에 영향을 미친다는 것입니다. 즉, 배경과 텍스트가 모두 반투명해집니다. 불투명도 명령을 0.1에서 1로 변경하여 투명도 수준을 높일 수 있습니다.

HTML 5 CSS 3 IE 9

웹 디자인에서는 부분 투명도도 사용되며 요소의 배경에만 설정되는 RGBA 색상 형식을 통해 달성됩니다.

일반적으로 디자인에서는 요소의 배경만 반투명해야 하며 텍스트는 가독성을 유지하기 위해 불투명해야 합니다. 요소 내부의 텍스트도 부분적으로 투명하므로 불투명도 속성은 여기에 적합하지 않습니다. 사용하기 가장 좋습니다 RGBA 형식, 그 일부는 알파 채널, 즉 투명도 값입니다. 값은 rgba로 작성된 다음 빨간색, 파란색 및 녹색 색상 구성 요소의 값이 괄호 안에 쉼표로 구분되어 나열됩니다. 마지막으로 투명도는 0에서 1까지 설정됩니다. 0은 완전한 투명도를 의미하고 1은 색상 불투명도(rgba 사용 구문)입니다.

반투명 배경 HTML 5 CSS 3 IE 9

배경 불투명도는 90%(반투명 배경 및 불투명 텍스트)로 설정됩니다.

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

배경은 background-repeat, background-attachment, background-origin, background-clip, background-color 등의 속성 집합으로 지정되며, 각각 별도로 지정하거나 background 속성에 결합하여 지정할 수 있습니다. 각각을 더 자세히 살펴보겠습니다.

배경색 속성

IE8에서도 이 방법을 지원합니다. 유연한 레이아웃을 위해 여러 이미지가 배경으로 사용됩니다. 가장 중요한 것은 이미지를 사용할 때 CSS에서 배경색도 설정하는 것을 잊지 마세요. 사용자가 단순히 이미지를 로드하지 않을 수도 있기 때문입니다.

배경 위치 속성

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

body (배경 위치: 오른쪽 중앙;) - 이 예시에서는 배경이 페이지 오른쪽에 위치하며, 이미지 하단과 상단 사이의 거리는 동일합니다.

배경 크기 속성

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

이 속성에는 몇 가지 문제가 있습니다. 올바른 표시이전 버전의 브라우저에서는 접두사를 사용해야 합니다. 틀림없이, 현재 버전이 속성을 완전히 지원하므로 특정 속성에 대한 필요성이 사라졌습니다.

배경 첨부 속성

이 속성은 스크롤할 때 배경 이미지의 동작을 지정합니다. 따라서 3가지 값을 사용할 수 있습니다(이 문서에 제시된 모든 속성에 공통적인 상속은 고려하지 않음).

• 결정된— 배경에 비해 사진이 움직이지 않게 만듭니다.
• 스크롤— 배경이 다른 요소와 함께 스크롤됩니다.
• 현지의— 콘텐츠에 스크롤이 있으면 배경 이미지도 스크롤됩니다. 콘텐츠 너머로 확장되는 배경은 고정됩니다.

사용 예:

본문(배경 부착 고정).

Firefox는 현재 마지막 속성(로컬)을 지원하지 않습니다.

배경 출처 속성

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

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

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

배경 반복 속성

원칙적으로 배경이 이미지로 주어지는 경우 수평 또는 수직으로 반복되어야 합니다. 이것이 background-repeat 속성이 사용되는 이유입니다. 따라서 CSS에 해당 속성이 포함된 블록의 배경은 여러 매개변수 중 하나를 가질 수 있습니다.

• 반복하지 않음— 이미지가 단일 버전으로 페이지에 나타납니다.
• 반복하다— 배경이 x축과 y축을 따라 반복됩니다.
• 반복-x- 수평으로만;
• 반복-y- 수직으로만 가능;
• 공간— 배경이 반복되지만 공간을 채울 수 없으면 그림 사이에 빈 공간이 나타납니다.
• 둥근— 전체 영역을 전체 그림으로 채울 수 없는 경우 이미지 크기가 조정됩니다.

속성 사용 예:

본문(백그라운드-반복: 반복 없음 반복)- 비슷한 배경 반복: 반복-y.

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

배경 클립 속성

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

• 패딩박스— 배경은 블록 내부에만 표시됩니다.
• 테두리 상자- 이미지가 프레임에 맞습니다.
• 콘텐츠 상자— 배경 그림은 콘텐츠 내부에만 나타납니다.

사용 예:

본문(배경 클립: 콘텐츠 상자;).

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

불투명도 및 필터 속성

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

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

CSS가 버전 9 이하의 IE에서도 작동하는 배경 투명도를 설정하려면 필터 속성을 사용하십시오.

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

이 경우 불투명도 값은 0~100 범위에서 설정됩니다. 불투명도 속성은 유전적이라는 점에서 RGBA를 사용하여 투명도를 설정하는 것과 다릅니다. 불투명도를 사용하면 배경뿐만 아니라 모든 요소도 투명해집니다. 블록 내부.

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

웹 페이지 요소의 투명도 수준을 결정합니다. 부분 또는 전체 투명도를 사용하면 요소가 투명하게 보입니다. 배경 그림또는 반투명 개체 아래에 있는 다른 요소입니다.

간략한 정보

명칭

	설명	예
<тип>	값의 유형을 나타냅니다.	<размер>
A && B	값은 지정된 순서대로 출력되어야 합니다.	<размер> && <цвет>
A | 비	제안된 값(A 또는 B) 중에서 하나의 값만 선택해야 함을 나타냅니다.	정상 | 작은 모자들
|| 비	각 값은 독립적으로 사용하거나 순서에 관계없이 다른 값과 함께 사용할 수 있습니다.	너비 || 세다
	그룹 값.	[ 자르기 || 십자가 ]
*	0회 이상 반복합니다.	[,<время>]*
+	한 번 이상 반복합니다.	<число>+
?	지정된 유형, 단어 또는 그룹은 선택 사항입니다.	삽입?
(A, B)	A회 이상, B회 이하로 반복하세요.	<радиус>{1,4}
#	쉼표로 구분하여 한 번 이상 반복합니다.	<время>#

×

가치

값은 범위의 숫자입니다. 값 0은 요소의 완전 투명도에 해당하고, 1은 불투명도에 해당합니다. 0.6 형식의 분수는 반투명도를 설정합니다. 불투명도: .6과 같이 앞에 0을 붙이지 않고 숫자를 쓸 수 있습니다.

모래 상자

곰돌이 푸는 항상 약간의 다과를 싫어하지 않았습니다. 특히 아침 11시에 아침 식사가 오랫동안 끝났고 점심 식사가 아직 시작되지 않았기 때문입니다. 그리고 물론 그는 토끼가 컵과 접시를 꺼내는 것을 보고 몹시 기뻤습니다.

div (불투명도: 1; )

예

결과 이 예그림에 표시됩니다. 1.

쌀. 1. 불투명도를 사용한 결과

객체 모델

객체.style.불투명도

메모

Firefox 버전 3.5까지는 -moz-opacity 속성을 지원합니다.

Internet Explorer 버전 9.0까지는 필터를 사용하여 투명도를 변경합니다. 이 브라우저의 경우 filter : alpha(opacity=50) 를 작성해야 하며, 여기서 opacity 매개변수는 0에서 100 사이의 값을 가질 수 있습니다.

사양

각 사양은 여러 단계의 승인을 거칩니다.

• 권장 사항 - 이 사양은 W3C에서 승인되었으며 표준으로 권장됩니다.
• 후보자 추천 ( 가능한 추천) - 표준을 담당하는 그룹은 목표 달성에 만족하지만 표준을 구현하려면 개발 커뮤니티의 도움이 필요합니다.
• 제안된 권장 사항 제안된 권장 사항) - 이 단계에서 문서는 최종 승인을 위해 W3C 자문위원회에 제출됩니다.
• 작업 초안 - 커뮤니티 검토를 위해 논의되고 수정된 초안의 보다 성숙한 버전입니다.
• 편집자 초안( 편집 초안) - 프로젝트 편집자가 변경한 후의 표준 초안 버전입니다.
• 초안 ( 초안 사양) - 표준의 첫 번째 초안 버전입니다.

×