-
HTML 웹 배경색 투명하게 코딩하기CSS 2021. 12. 15. 19:38
배경과 내용의 투명도
CSS의 opacity 속성으로 요소의 투명도를 정할 수 있다. opacity 속성은 선택한 요소의 배경과 내용 모두를 투명하게 만듭니다. 간단 예제는 아래와 같다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { padding: 40px; background-image: url( "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb39JJY%2Fbtrn21acXp6%2F08KskUTpxRq383NZJc5pa1%2Fimg.jpg" ); } p { padding: 30px; font-size: 50px; font-weight: bold; text-align: center; background-color: #ffffff; opacity: 0.5; } </style> </head> <body> <div> <p>gold.goose</p> </div> </body> </html>
출력 문단의 배경과 글자 모두가 투명해진다.
배경의 투명도
만약 배경만 투명하게 하고 글자는 투명하지 않게 하려면 opactiy 속성을 쓰지 말고, 배경색을 RGBA색상을 이용하여 정한다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> div { padding: 40px; background-image: url( "https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb39JJY%2Fbtrn21acXp6%2F08KskUTpxRq383NZJc5pa1%2Fimg.jpg" ); } p { padding: 30px; font-size: 50px; font-weight: bold; text-align: center; background-color: #ffffff; background-color: rgba( 255, 255, 255, 0.5 ); } </style> </head> <body> <div> <p>gold.goose</p> </div> </body> </html>
RGBA 색상은 IE8 이하에서는 적용되지 않는다. 따라서 IE8 이용자를 고려한다면 위 예제처럼 배경색을 두가지로 정해서 한다. (IE8로 접속하면 배경색이 하얀색이 된다.)
'CSS' 카테고리의 다른 글
CSS 한 줄 코드: 사용자 경험을 변화시키는 7가지 방법 (0) 2024.02.21 모바일 환경 사용자 경험 개선-클릭 가능 요소 (0) 2024.01.29 auto;overflow: hidden; 속성에 대해 (0) 2022.02.10 Darkgray #a9a9a9 헥스 색상 코드 (0) 2021.12.15 CSS background-color 배경색을 정하는 속성에 대해서 (0) 2021.12.15