CSS에서 단어의 투명도를 변경하는 방법-CSS 튜토리얼-php.cn

CSS에서 단어의 투명도를 변경하는 방법

青灯夜游

풀어 주다： 2023-01-11 09:19:52

원래의

11880명이 탐색했습니다.

CSS에서 단어의 투명도를 변경하는 방법: 1. 불투명도 속성을 사용하여 "opacity: transparent value;" 스타일을 텍스트 요소에 추가합니다. 2. rgba() 함수를 사용하여 "color:rgba(red)를 추가합니다. , 녹색, 파란색, 투명도 값);" 스타일이면 충분합니다.

CSS에서 단어의 투명도를 변경하는 방법

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

css를 사용하면 단어의 투명도가 변경됩니다.

방법 1. 불투명도 속성

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div style="opacity:1;">测试文字</div>
		<div style="opacity:0.5;">测试文字</div>
		<div style="opacity:0.2;">测试文字</div>
	</body>
</html>

로그인 후 복사

CSS에서 단어의 투명도를 변경하는 방법

Opacity 속성을 사용하여 요소의 투명도 수준을 설정합니다.

구문:

opacity: value;

로그인 후 복사

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

방법 2: rgba() 함수 사용

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<div style="color: rgba(255,0,0,1)">测试文字</div>
		<div style="color: rgba(255,0,0,0.5)">测试文字</div>
		<div style="color: rgba(255,0,0,0.2)">测试文字</div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS에서 단어의 투명도를 변경하는 방법

rgba() 함수는 빨간색(R), 녹색(G), 파란색(B) 및 투명도(A)의 중첩을 사용합니다. ) 다양한 색상을 생성합니다.

문법:

rgba(red, green, blue, alpha)

로그인 후 복사

속성 값:

Value	Description
red	빨간색 값을 정의합니다. 값 범위는 0 ~ 255이며 백분율 0%를 사용할 수도 있습니다. ~ 100% .
green	녹색 값을 정의합니다. 값 범위는 0~255이며, 백분율 0%~100%를 사용할 수도 있습니다.
blue	파란색 값을 정의합니다. 값 범위는 0~255이며 백분율 0%~100%를 사용할 수도 있습니다.
alpha - 투명도	투명도 정의 0(완전 투명) ~ 1(완전 불투명)