CSS의 투명한 배경색
Jay Singh
2023년2월20일
CSS의 투명 색상 덕분에 페이지의 다른 상위 요소에서 배경 구성 요소를 볼 수 있습니다. background-color 속성은 투명한 색상을 만드는 데 사용할 수 있습니다.
CSS에서 background-opacity라는 속성은 서체와 같은 다른 구성 요소에 영향을 주지 않고 요소 배경의 불투명도 또는 투명도를 변경하는 데 사용되지 않습니다. CSS opacity 속성으로 이를 달성하려고 하면 다른 모든 구성 요소의 불투명도도 수정됩니다.
몇 가지 예를 들어 CSS에서 투명한 배경색을 변경하는 방법을 보여 드리겠습니다.
RGBA를 사용하여 CSS에서 배경색 및 투명도 설정
CSS 3에 도입된 색상 값의 일부로 알파 투명도를 통합하는 RGBA 색상을 사용할 수 있습니다. 다음 예에서 볼 수 있듯이 RGBA 색상을 사용하여 배경 색상과 투명도를 변경할 수 있습니다.
코드 예:
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-image: url("/img/DelftStack/logo.png");
}
p{
padding: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the content.</p>
</body>
</html>
CSS에서 투명한 배경색 만들기
투명한 배경색을 생성하려면 CSS RGBA() 색상 코드를 사용하십시오. 이 효과는 방문자에게 텍스트 배경을 표시하여 뒷면 그림을 표시하려는 경우 요소에 모양과 느낌을 제공하는 데 유용합니다.
코드 예:
<html lang="en">
<head>
<title>CSS Make Background Color Transparent Using RGBA in CSS</title>
<style>
.main-div{
background-image: url("/img/DelftStack/logo.png");
background-attachment: scroll;
padding: 20px;
}
.transparent-bg{
background: rgba(255, 165, 0, 0.73);
padding: 20px;
color: #fff;
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Transparent backgorund color using RGBA in CSS</h2>
<div class="main-div">
<div class="transparent-bg">
Transparent Background
</div>
</div>
</body>
</html>