반응형
여태껏 opacity로 배경색 조정하는 건 알고 있었다만
늘 글자색 적용이 안돼서 어떻게 하는 건가 했는데....
그건 opacity로 하면 안돼고 그냥 배경 색상을 투명한 거로 설정했어야 했다...!!!!!
배경의 투명도
만약 배경만 투명하게 하고 글자는 투명하지 않게 하려면 opacity 속성을 쓰지 말고, 배경색을 RGBA 색상을 이용하여 정합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
div {
padding: 40px;
background-image: url( "images/bg-house.png" );
}
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>Lorem</p>
</div>
</body>
</html>
투명한 색상값 찾는 법
구글에 치면 나온다!
반응형
'HTML, CSS' 카테고리의 다른 글
| display: inline-block; 정렬! (0) | 2021.01.29 |
|---|---|
| placeholder 안에서 Enter 하기 (0) | 2021.01.28 |
| css 구글폰트 적용하기 (0) | 2021.01.26 |
| <address> 태그, 기울임 (0) | 2020.10.28 |
| <Textarea> </textarea> rows, cols, placeholder (0) | 2020.10.28 |