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

불투명도 속성

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

예제 1은 opacity 를 사용하여 반투명 상자를 만드는 방법을 보여줍니다.

예 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

이 예의 결과는 그림 1에 나와 있습니다. 2. 배경의 불투명도 값을 90%로 설정합니다.

쌀. 2. 반투명 배경 및 불투명한 텍스트

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

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

이 효과는 달성 다른 방법들, PNG 이미지를 배경으로 사용하고, 체크 무늬 이미지를 만들고, opacity 속성을 사용하는 것과 같은 구식 기술을 포함합니다. 그러나 블록에 반투명 배경을 만들어야 하는 즉시 이러한 방법에는 불편한 단점이 있습니다.

텍스트와 배경의 반투명도 고려 - 웹사이트 디자인에서 올바르게 사용하는 방법:

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

HTML 5 CSS 3 IE 9

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

일반적으로 디자인에서 요소의 배경만 반투명해야 하고 텍스트는 읽을 수 있도록 불투명해야 합니다. 요소 내부의 텍스트도 부분적으로 투명하기 때문에 opacity 속성은 여기에 맞지 않습니다. 알파 채널, 즉 투명도 값이 일부인 RGBA 형식을 사용하는 것이 가장 좋습니다. 값은 rgba로 작성된 다음 색상의 빨강, 파랑 및 녹색 구성 요소 값이 쉼표로 구분된 대괄호 안에 나열됩니다. 마지막은 0에서 1로 설정되는 투명도입니다. 0은 완전히 투명하고 1은 불투명하며 rgba를 적용하는 구문입니다.

반투명 배경 HTML 5 CSS 3 IE 9

배경의 불투명도 값은 반투명 배경 및 불투명 텍스트인 90%로 설정됩니다.

좋은 하루, 웹 개발 괴짜뿐만 아니라 초보자. IT 분야의 트렌드나 웹 패션을 따르지 않는 분들을 위해 이번 간행물의 주제는 “투명하게 만드는 방법 CSS 블록도구"를 제공합니다. 실제로 현재 2016에서는 다양한 투명 개체를 온라인 서비스에 도입하는 것이 세련된 움직임으로 간주됩니다.

따라서이 기사에서 나는 모든 것에 대해 말할 것입니다. 기존 방법홍수 전 솔루션에서 시작하여 투명성을 창출하고 브라우저와 솔루션의 호환성에 중점을 둘 것입니다. 구체적인 예 프로그램 코드. 그리고 이제 일하러!

방법 1. 홍수 전

언제 거기 있었어 약한 컴퓨터"능력"이 개발되지 않았으므로 개발자는 투명한 배경을 만드는 고유한 방법을 생각해 냈습니다. 투명 픽셀과 색상 픽셀을 차례로 사용하는 것입니다. 이런 식으로 생성된 블록은 크기를 조정할 때 바둑판처럼 보이지만 일반적인 크기에서는 일종의 투명도와 비슷합니다.

내 생각에 이것은 "목발"이 물론 최신 솔루션이 작동하지 않는 이전 버전의 브라우저에서 도움이 됩니다. 그러나 텍스트 디스플레이의 품질이 , 에 새겨진 , 급격히 떨어집니다.

방법 2. 혼동하지 않음

드문 경우지만 개발자는 이미 완성된 반투명 이미지...를 삽입하여 반투명 이미지 도입 문제를 해결합니다! 이를 위해 PNG-24 형식으로 저장된 이미지가 사용됩니다. 이 그래픽 형식을 사용하면 256단계의 반투명도를 설정할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

그러나 이 방법은 다음과 같은 몇 가지 이유로 편리하지 않습니다.

1. 인터넷 익스플로러 6은 이 기술에서 작동하지 않습니다. 이에 대한 스크립트 코드를 작성해야 합니다.
2. CSS에서는 배경색을 변경할 수 없습니다.
3. 브라우저에서 이미지 표시 기능을 비활성화하면 사라집니다.

방법 3. 승격

블록을 투명하게 만드는 가장 일반적이고 잘 알려진 방법은 속성입니다. 불투명.

매개변수 값은 범위에서 다양하며 0에서는 객체가 보이지 않고 1에서는 완전히 표시됩니다. 그러나 여기에는 몇 가지 불쾌한 순간이 있습니다.

첫째, 모든 자식 요소는 투명도를 상속합니다. 그리고 이것은 새겨진 텍스트가 배경과 함께 "빛날 것"을 의미합니다.

둘째, Internet Explorer는 다시 코를 킁킁거리고 버전 8까지는 다음과 함께 작동하지 않습니다. 불투명.

이 문제를 해결하려면 다음을 사용하십시오. 필터:알파(불투명도=값).

예를 들어 보겠습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

방법 4. 현대

오늘날 전문가들은 rgba(r, g, b, a) 도구를 사용합니다.

그 전에 RGB가 인기 있는 색상 모델 중 하나라고 말했습니다. 여기서 R은 모든 빨간색 음영, G는 녹색 음영, B는 파란색 음영을 담당합니다.

css 매개변수의 경우 변수 A는 알파 채널을 담당하고 차례로 투명도를 담당합니다.

주요 이점 마지막 방법- 알파 채널은 스타일이 지정된 상자 내부의 개체에 영향을 주지 않습니다.

rgba(r, g, b, a)는 다음과 같은 이유로 지원됩니다.

• 10가지 버전의 오페라
• 인터넷 익스플로러 9;
• 사파리 3.2;
• 3가지 버전의 파이어폭스.

나는 참고하고 싶다 흥미로운 사실! 사랑하는 Internet Explorer 7은 속성을 결합할 때 오류가 발생합니다. 배경색색상의 이름과 함께(background-color: gold). 따라서 다음만 사용해야 합니다.

배경색: rgba(255, 215, 0, 0.15)

이제 예입니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

우리 가게에서는 모든 종류의 꽃을 찾을 수 있습니다.

참고 텍스트 내용블록은 완전히 보이는 반면(100% 검은색) 배경은 0.88의 알파 채널로 설정됩니다. 88%.

이 게시물은 종료되었습니다. 내 블로그를 구독하고 친구를 초대하는 것을 잊지 마십시오. 웹 언어 학습에 행운을 빕니다! 안녕!

블라드 메르제비치

부분 투명도를 올바르게 사용하면 웹 사이트 디자인에서 매우 인상적으로 보입니다. 가장 중요한 것은 반투명 블록 아래에 단색 패턴이 아니라 이미지가 있어야한다는 것입니다.이 경우 투명도가 눈에 띄게됩니다. 이 효과는 여러 가지 방법으로 달성되며 구식 방법을 포함하여 모든 것을 기억한다면 PNG 이미지를 배경으로 사용하고 체크 무늬 이미지를 만들고 불투명도 속성을 만드는 것입니다. 그러나 블록에 반투명 배경을 만들어야 하는 즉시 이러한 방법은 불편한 단점이 있습니다. 나는 반투명 효과를 만드는 비전통적인 옵션에 익숙하지 않은 독자뿐만 아니라 무엇이 위험에 처해 있는지 명확하게 하기 위해 짧은 리뷰를 만들 것입니다.

배경으로 PNG

에 그래픽 편집기단색 반투명 ​​도면이 미리 준비되어 PNG-24 형식으로 저장됩니다(그림 1). 이 형식의 특징은 256단계의 투명도를 지원한다는 것입니다. 간단히 말해서 반투명한 그림을 표시할 수 있습니다.

쌀. 1. 배경을 만드는 이미지

그런 다음 예제 1과 같이 background 속성을 통해 이미지를 배경으로 추가합니다.

예 1: 반투명 패턴 사용

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

쌀. 2. 배경화면 적용하기

레거시 Internet Explorer 6 브라우저는 PNG-24에서 반투명으로 작동하지 않습니다. 어떤 이유로 이 브라우저를 지원해야 하는 경우 스크립트를 사용해야 합니다.

제시된 방법에는 여러 가지 제한 사항이 있습니다. 따라서 브라우저에서 이미지를 끄면 배경이 완전히 사라집니다. 또한 배경색과 투명도 값을 변경하는 것이 쉽지 않기 때문에 이미지를 다시 수정해야 합니다.

체크 무늬 이미지

이 방법은 브라우저가 "아무것도 할 수 없는" 반투명성을 구현하는 고대 방식에 속하며 템플릿이 아닌 솔루션을 찾아야 했습니다. 비결은 투명 픽셀과 불투명 픽셀이 번갈아 나타나는 이미지를 만드는 것입니다(그림 3). 이러한 규칙적인 구조는 본질적으로 그것을 모방하는 반투명의 효과를 생성합니다.

쌀. 3. 확대된 체크무늬

최종적으로는 다음과 같습니다(그림 4).

쌀. 4. 반투명의 모방

이 방법의 단점은 이전 방법과 비슷하며 무아레 패턴도 발생할 수 있으며 텍스트 품질 저하가 발생합니다.

불투명도 속성

CSS 3 opacity 속성은 투명도 값을 설정하고 범위는 0에서 1까지입니다. 여기서 0은 요소의 전체 투명도이고 1은 불투명도입니다. opacity 속성에는 기능이 있습니다. 투명도는 모든 하위 요소에 배포되며 상위 요소의 투명도 값을 초과할 수 없습니다. 반투명 배경에는 불투명한 텍스트가 있을 수 없습니다(예제 2).

예 2: 불투명도 사용

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

예제의 결과는 그림 1에 나와 있습니다. 5.

쌀. 5. 텍스트와 배경의 투명도

Internet Explorer 버전 8.0 이하에서는 불투명도가 작동하지 않으므로 브라우저별 필터 속성이 사용됩니다. 당연히 유효하지 않은 CSS 코드가 생성됩니다.

RGBA

현대적인 접근 방식은 위의 방법보다 훨씬 간단하고 시각적이며 색상과 배경에 RGBA 형식을 사용하는 것으로 구성됩니다. 처음 세 글자는 많은 사람들에게 친숙하며 빨강, 녹색, 파랑(빨강, 녹색, 파랑)을 나타내며 마지막 세 글자는 알파 채널을 상징하고 요소의 투명도를 설정합니다. 기록 형식은 이렇습니다.

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

대괄호에는 문자 대신 색상 구성 요소의 값이 입력되고 모든 그래픽 편집기에서 볼 수 있으며 마지막 값은 투명도를 설정하고 opacity 속성 값과 일치합니다.

모든 브라우저가 이 형식을 지원하는 것은 아닙니다. Internet Explorer 버전 9 이후, Opera 버전 10 이후, Firefox 3 이후, Safari 3.2 이후. 그러나 일반적으로, 최신 브라우저투명도를 올바르게 표시합니다. 이전 버전의 IE의 경우 일반적인 형식으로 색상을 별도로 지정할 수 있지만 물론 투명도는 없습니다. 또는 filter 속성을 다시 사용하지만 투명도가 텍스트에도 영향을 미친다는 사실을 참아야 합니다(예 3). 준수합니다 유효한 코드 CSS, 조건부 주석을 사용했습니다.

예 3: RGBA 사용

HTML5 CSS3 IE Cr Op Sa Fx

예제의 결과는 그림 5에서 볼 수 있습니다. 6.

쌀. 6. 불투명한 텍스트가 있는 반투명 배경

그림을 이전 그림과 비교하면 글자가 더 밝고 선명해졌습니다.

에 인터넷 브라우저 Explorer 7은 background-color를 다른 값과 결합할 때 버그를 발견했습니다. 예를 들어 아래와 같이 배경색을 빨간색으로 설정하면 IE7에서는 배경이 전혀 표시되지 않습니다.

Div ( background-color: red; /* IE7에서는 적용 불가 */ background-color: rgba(255, 0, 0, 0.5); )

이것은 background-color 속성을 background 로 바꾸면 해결됩니다.

Div ( background: red; /* 그리고 이것은 작동합니다 */ background: rgba(255, 0, 0, 0.5); ) 그러나 한 가지 주의 사항이 있습니다. CSS 유효성 검사기는 다음과 같이 설정하면 백그라운드에서 "맹세"합니다. RGBA 형식. 그러나 동시에 background-color 에 올바르게 적용됩니다. 일반적으로 항상 그렇듯이 브라우저와 유효성 중에서 선택해야 합니다.

설명

요소의 배경색을 지정합니다. 이 속성은 부모 속성을 상속하지 않지만 초기 값이 투명으로 설정되어 있기 때문에 배경색이 자식 요소상위 요소의 배경색과 일치합니다.

통사론

배경색:<цвет>| 투명 | 상속하다

가치

투명 투명 배경을 설정합니다. 상속 부모의 값을 상속합니다.

HTML5 CSS2.1 IE Cr Op Sa Fx

Lorem ipsum dolor sitmet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

에 이 예웹 페이지 요소의 경우 세 가지 다양한 방법배경색 설정. 예제의 결과는 그림 1에 나와 있습니다. 하나.

쌀. 1. 배경색 적용

개체 모델

document.getElementById("elementID").style.backgroundColor

브라우저

Internet Explorer 버전 7.0까지는 상속 값을 지원하지 않습니다.