CSS에서 투명도를 설정하는 방법은 무엇입니까? 투명도를 설정하는 두 가지 방법(코드 예제)-CSS 튜토리얼-php.cn

CSS에서 투명도를 설정하는 방법은 무엇입니까? 투명도를 설정하는 두 가지 방법(코드 예제)

青灯夜游

풀어 주다： 2019-11-26 16:57:05

원래의

81229명이 탐색했습니다.

프런트 엔드 페이지의 레이아웃을 개발할 때 사용자에게 다양한 효과를 제공하기 위해 투명도를 설정해야 하는 경우가 많습니다. 그러면 CSS에서는 투명도를 어떻게 설정합니까? 이 장에서는 CSS(코드 예제)를 사용하여 투명도를 설정하는 두 가지 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

권장 매뉴얼: css 온라인 매뉴얼

1. css rgba()는 색상 투명도를 설정합니다

구문:

rgba（R,G,B,A）;

로그인 후 복사

RGBA는 Red(빨간색) Green(녹색) Blue(파란색)를 나타냅니다. ) 세 단어(색상)와 알파(불투명도)의 약어입니다. RGBA 색상 값은 개체의 불투명도를 지정하는 알파 채널이 포함된 RGB 색상 값의 확장입니다.

rgba()의 값 소개:

R: 빨간색 값. 양의 정수(0~255)

G: 녹색 값. 양의 정수(0~255)

B: 파란색 값. 양의 정수 (0~255)

A: 투명성. 값은 0에서 1 사이입니다.

rgba()는 색상 투명도를 간단히 설정할 수 있으며 페이지 레이아웃에 다양하게 적용할 수 있습니다. 예를 들어 배경을 투명하게 만들지만 위의 텍스트는 불투명합니다.

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>rgba()</title>
		<style>
			.demo{
				width: 350px;
				height: 300px;
				margin: 50px auto;
			}
			.demo *{
				width: 120px;
				height: 120px;
				margin: 10px;
				float: left;
			}
			.demo1{
				background:rgba(255,0,0,1);
			}
			.demo2{
				background:rgba(255,0,0,0.5);
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">背景色不透明，文字不透明！</div>
			<div class="demo2">背景色半透明，文字不透明！</div>
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS에서 투명도를 설정하는 방법은 무엇입니까? 투명도를 설정하는 두 가지 방법(코드 예제)

위 예에서는 색상 값 설정은 동일하지만 투명도가 다릅니다. 이런 식으로 색상 이외의 차이점은 볼 수 없습니다. 또한 상위 컨테이너 데모에 배경색을 설정했습니다. 이 렌더링은 다음과 같습니다.

CSS에서 투명도를 설정하는 방법은 무엇입니까? 투명도를 설정하는 두 가지 방법(코드 예제)

이 방법으로 첫 번째 상자(demo1)를 볼 수 있습니다. ) 투명도가 설정되지 않았습니다. 빨간색은 아래 상자의 색상을 완전히 덮었습니다(데모). 두 번째 상자(데모2)는 색상을 반투명하게 만들기 위해 투명도를 설정했지만 아래 상자의 색상을 완전히 덮지는 않았습니다(데모). 그러나 혼합 디스플레이.

2. CSS 불투명도 속성은 배경 투명도를 설정합니다.

구문:

opacity: value ;

로그인 후 복사

값: 0.0(완전 투명)에서 1.0(완전 불투명)까지 불투명도를 지정합니다.

opacity 속성은 상속되며 컨테이너의 모든 요소를 투명하게 만듭니다.

코드 예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>opacity属性</title>
		<style>
			.demo{
				width: 280px;
				height: 140px;
				margin: 50px auto;
			}
			.demo1,.demo2{
				width: 120px;
				height: 120px;
				margin: 10px;
				float: left;
				background:#2DC4CB;
			}
			.demo1{
				opacity:1;
			}
			.demo2{
				opacity:0.5;
			}
		</style>
	</head>
	<body>
		<div class="demo">
			<div class="demo1">
				<p>背景色不透明，文字不透明！</p>
			</div>
			<div class="demo2">
				<p>背景色透明，文字也透明！</p>
			</div>
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS에서 투명도를 설정하는 방법은 무엇입니까? 투명도를 설정하는 두 가지 방법(코드 예제)

opacity:0.5;

추천 관련 기사:
1.웹 디자인에서 CSS로 배경 투명도를 얻는 방법(예)
2.CSS로 반투명 배경색을 얻는 두 가지 방법
관련 비디오 튜토리얼:
1.CSS 비디오 튜토리얼 - Jade Girl 반야심경편

요약:

rgba() 메서드와 불투명도 메서드 모두 투명 효과를 얻을 수 있지만 rgba()는 요소의 색상이나 배경색(요소의 하위 요소)에만 작동합니다. rgb() 투명도 세트는 이를 상속하지 않습니다. 불투명도는 상속을 가지며 이는 요소 자체에 영향을 미칠 뿐만 아니라 요소 내의 모든 하위 요소도 투명하게 만듭니다. 어떤 시나리오에서 어떤 방법을 사용할지는 실제 요구 사항에 따라 다릅니다. 이 간단한 튜토리얼이 도움이 되기를 바랍니다!

위 내용은 CSS에서 투명도를 설정하는 방법은 무엇입니까? 투명도를 설정하는 두 가지 방법(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!