CSS의 투명한 배경색

Jay Singh 2023년2월20일
  1. RGBA를 사용하여 CSS에서 배경색 및 투명도 설정
  2. CSS에서 투명한 배경색 만들기
CSS의 투명한 배경색

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>

관련 문장 - CSS Background