배경 이미지 투명하게 만드는 방법

배경의 투명도 배경만 투명하게 하려면 RGBA 색상을 이용하여 정합니다. 배경과 내용의 투명도 opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 요소의 투명도를 정할 수 있습니다.

배경의 투명도

배경만 투명하게 하려면 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;
}

로딩 중... 잠시만 기다려주세요.
자바스크립트를 허용해주세요.

 

기타 CSS 참조

Post a Comment