CSS를 사용한 배경 투명 및 텍스트 불투명 효과 요약

투명 및 불투명 스타일의 사용은 프로젝트 개발 프로세스 초기에 널리 사용되었습니다. 이제는 누구나 매우 익숙한 효과입니다. 투명도 효과는 사진뿐만 아니라 다양한 장소에서도 사용됩니다. CSS를 사용하면 다양한 브라우저에 대한 호환성 설정도 쉽게 얻을 수 있습니다. 때로는 배경 이미지에 텍스트 소개를 넣을 때 자주 사용됩니다. 배경 이미지는 투명하고 텍스트는 불투명해지는 효과가 필요합니다. 다음 장에서는 CSS를 사용하여 투명한 배경 이미지와 불투명한 텍스트 효과를 얻는 방법에 대해 설명합니다.

투명한 배경 및 불투명한 텍스트 효과

1. CSS를 사용하여 투명한 배경 이미지와 불투명한 텍스트를 얻는 두 가지 방법

방법 1(반투명 유리 효과): 배경 이미지 + 의사 클래스 flite :blur(3px)

방법 2(반투명 효과): 배경 이미지 + 위치 지정 + 배경:rgba(255,255,255,0.3)

CSS 투명한 배경 이미지와 불투명한 텍스트 효과를 얻는 두 가지 방법

2. 구현 배경은 투명하고 텍스트는 불투명합니다(모든 브라우저와 호환 가능)

FF/Chrome과 같은 최신 브라우저에서는 CSS 속성 background-color의 rgba를 사용하여 텍스트가 남아 있는 동안 투명한 배경을 쉽게 얻을 수 있습니다. 불투명체. IE6/7/8 브라우저는 rgba를 지원하지 않으며 IE의 독점 필터인 filter:Alpha를 사용해야만 달성할 수 있습니다. 그러나 이렇게 작성하면 텍스트가 투명해지기 때문에 transparent의 하위 노드 내에서만 사용할 수 있습니다. 컨테이너(텍스트 노드 제외) 위치 설정: 상위 요소의 투명도 필터를 상속하지 않습니다.

3.

배경 투명도 및 텍스트 불투명도를 얻는 Css 방법

투명도를 얻는 Css 방법에는 일반적으로 불투명도를 80%로 쓰는 방법이 있습니다

불투명도 값:x, x in css3 0에서 1까지(예: 불투명도: 0.8

css3 rgba(red, green, blue, alpha), 0에서 1까지의 알파 값, 예: rgba(255,255,255,0.8)

IE 독점 필터 필터:Alpha ( opacity=x), 값 :0.8; /*Firefox에서 요소 투명도 설정

filter: alpha(opacity=80) /*즉, 투명도를 설정하려면 필터를 사용하세요

그러나 배경의 투명도를 설정할 때 라벨의 텍스트와 이미지도 반투명해지는 것을 원하지 않는 경우가 많습니다.

5.

CSS3 불투명도 구현을 위한 전체 코드

값 설명:

1, |는 부동 소수점 숫자와 단위 식별자로 구성된 길이 값입니다. 음수일 수 없으며 기본값은 1입니다. 불투명도 값이 1이면 요소가 완전히 불투명하고, 값이 0이면 요소가 완전히 투명하고 보이지 않습니다.

2. 상속이란 상속, 즉 상위 요소의 불투명도를 상속한다는 의미입니다.

3. IE 브라우저의 경우 전용 속성 필터를 사용하여 호환 가능합니다. 필터: 알파(알파=값);.

관련 질문 및 답변

1.

배경을 투명하게 하고 내용을 불투명하게 만드는 CSS

2. 캔버스 배경은 불투명하지만 내부의 일부 요소는 투명합니다(빈 효과와 유사).

3.

CSS 배경 투명도 찾기 및 텍스트를 불투명하게 만드는 방법

[관련 권장 사항]

1. PHP 중국어 웹사이트의 무료 비디오 튜토리얼: "php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼 "

2. PHP 중국어 웹사이트 관련 기사: CSS의 반투명도 설정 요약

위 내용은 CSS를 사용한 배경 투명 및 텍스트 불투명 효과 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!