CSS3에서 투명도를 설정하는 방법-CSS 튜토리얼-php.cn

CSS3에서 투명도를 설정하는 방법

WBOY

풀어 주다： 2021-11-19 17:50:33

원래의

6825명이 탐색했습니다.

방법: 1. rgba() 함수를 사용합니다. 구문은 "rgba(빨간색 값, 녹색 값, 파란색 값, 투명도 값)"입니다. 2. 불투명도 속성을 사용합니다. 구문은 "불투명도: 투명도 값; "; 3 , 필터 속성을 사용하는 경우 구문은 "filter:opacity(투명도 값);"입니다.

CSS3에서 투명도를 설정하는 방법

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

css3에서 투명도 설정하는 방법

1. rgba() 함수를 사용하여 빨간색(R), 녹색(G), 파란색(B), 투명도(A)를 겹쳐서 다양한 색상을 생성합니다.

RGBA는 빨간색, 녹색, 파란색, 투명도(영어: Red, Green, Blue, Alpha)를 의미합니다.

Red(R) 색상의 빨간색 구성 요소를 나타내는 0에서 255 사이의 정수입니다. 녹색(G) 색상의 녹색 구성 요소를 나타내는 0에서 255 사이의 정수입니다. 파란색(B) 색상의 파란색 구성 요소를 나타내는 0에서 255 사이의 정수입니다. 투명도(A)는 0에서 1 사이의 값을 가지며 투명도를 나타냅니다.

CSS3에서 투명도를 설정하는 방법

출력 결과:

CSS3에서 투명도를 설정하는 방법

2. opacity 속성을 사용하여 요소의 불투명도 수준을 설정합니다. 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
</style>
</head>
<body>
<div>本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>
</body>
</html>

로그인 후 복사

출력 결과:

CSS3에서 투명도를 설정하는 방법

3. 필터 속성을 사용하여 요소(일반적으로 CSS3에서 투명도를 설정하는 방법 )의 시각적 효과(예: 흐림 및 채도)를 정의합니다. 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter:opacity(50%); /* Chrome, Safari, Opera */
    filter: opacity(50%);
}
</style>
</head>
<body>
<p>图片转为透明:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">
</body>
</html>

로그인 후 복사

출력 결과:

CSS3에서 투명도를 설정하는 방법