CSS의 rgba, rgb 및 불투명도 간의 차이점에 대한 자세한 그래픽 설명
- yulia원래의
- 2018-10-22 15:17:086137검색
배경색, rgb, rgba 등 CSS에서 배경색을 설정하는 방법은 다양합니다. rgba, rgb 및 불투명도의 차이점을 알고 계십니까? 이 기사에서는 rgba, rgb 및 불투명도의 차이점에 대해 설명합니다. 관심 있는 친구는 이를 참조할 수 있습니다.
rgb와 rgba의 차이점:
rgb는 빨간색, 녹색, 파란색을 나타내며 0에서 255 사이의 값을 갖습니다. 예: 검정색은 rgb(0,0, 0)으로 나타낼 수 있습니다.
rgba는 다음을 나타냅니다. 빨간색, 녹색, 파란색, 투명도(불투명도)까지 투명도 값은 0~1 사이입니다
rgba와 rgb의 차이점은 rgba 설정이 가능하다는 점입니다. 배경색인 rgb의 투명도는 허용되지 않습니다
예 1: 배경 사용: rgb(255,0,0) 배경 색상을 빨간색으로 설정
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.a1{
width: 300px;
height: 200px;
position: relative;
border: 1px solid black;
}
.a2{
width: 200px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
background: rgb(255,0,0);
}
</style>
</head>
<body>
<div class="a1"></div>
<div class="a2"></div>
</body>
</html>렌더링:
예 2: 배경 사용: rgba(255, 0,0,0.5) 배경 색상을 반투명으로 설정 빨간색
.a1{
width: 300px;
height: 200px;
position: relative;
border: 1px solid black;
}
.a2{
width: 200px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
background: rgba(255,0,0,0.5);
}렌더링:
rgba()와 불투명도의 차이점:
둘 다 투명 효과를 설정할 수 있지만 불투명도 속성은 요소에 작용하며 하위 요소와 같은 요소 내부의 모든 요소에 대해 작동합니다. 요소의 경우 rgba는 자체적으로만 작동하며 하위 요소에서는 작동하지 않습니다. 구체적인 차이점은 렌더링을 비교하십시오.
예 3: 불투명도: 0.5를 사용하여 투명도를 설정합니다. 코드는 다음과 같습니다.
<style type="text/css">
.a1{
width: 300px;
height: 200px;
position: relative;
border: 1px solid black;
}
.a2{
width: 200px;
height: 100px;
position: absolute;
top: 50px;
left: 50px;
background: red;
opacity: 0.5;
}
</style>
<body>
<div class="a1"></div>
<div class="a2">我是盒子里面的内容，文字不需要透明</div>
</body>렌더링:
렌더링에서 rgba, rgb 및 불투명도의 차이를 확인할 수 있습니다. 배경색은 투명도를 설정할 수 있으며 투명도는 내부 요소에 영향을 미치지 않습니다. 불투명도는 투명도를 설정할 수 있지만 투명도는 내부 요소에 영향을 미칩니다.
위 내용을 예제와 결합하여 rgba, rgb 및 불투명도의 차이점을 소개합니다. 초보자도 직접 시도해 보고 깊은 인상을 받을 수 있습니다.
더 많은 관련 비디오 튜토리얼을 보려면 CSS 튜토리얼
을 방문하세요.위 내용은 CSS의 rgba, rgb 및 불투명도 간의 차이점에 대한 자세한 그래픽 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!