배경의 투명도
배경만 투명하게 하려면 RGBA 색상을 이용하여 정합니다.
간단한 예제는 다음과 같습니다.
div {
padding: 40px;
background-image: url( "//bit.ly/3l02sot" );
}
p {
font-family: "Arial Black", sans-serif;
padding: 30px;
font-size: 56px;
font-weight: bold;
text-align: center;
background-color: rgba( 255, 255, 255, 0.5 );
}
배경과 내용의 투명도
opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다.
요소의 투명도를 정할 수 있습니다.
div {
padding: 40px;
background-image: url( "https://bit.ly/3l02sot" );
}
p {
font-family: "Arial Black", sans-serif;
padding: 30px;
font-size: 56px;
font-weight: bold;
text-align: center;
background-color: #ffffff;
opacity: 0.5;
}