CSS3에서 투명도를 설정하는 방법
- WBOY원래의
- 2021-11-19 17:50:336773검색
방법: 1. rgba() 함수를 사용합니다. 구문은 "rgba(빨간색 값, 녹색 값, 파란색 값, 투명도 값)"입니다. 2. 불투명도 속성을 사용합니다. 구문은 "불투명도: 투명도 값; "; 3 , 필터 속성을 사용하는 경우 구문은 "filter:opacity(투명도 값);"입니다.
이 튜토리얼의 운영 환경: 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 사이의 값을 가지며 투명도를 나타냅니다.
출력 결과:
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>출력 결과:
3. 필터 속성을 사용하여 요소(일반적으로 )의 시각적 효과(예: 흐림 및 채도)를 정의합니다. 코드는 다음과 같습니다:
<!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>출력 결과:
(동영상 공유 학습: css 동영상 튜토리얼)
위 내용은 CSS3에서 투명도를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!