글자색은 선명하고 배경색은 투명하게 처리하기
배경색은 투명하게 처리하려고 배경색에 opacity 속성을 사용하면 글자색도 투명도가 적용되어 흐려지는 현상이 일어난다. 이럴 경우 rgba를 이용해서 배경색에 투명도를 지정하면 글자색은 선명하고 배경색을 투명하게 처리할 수 있다.
<style type="text/css">
div {
padding:60px;
background-image: url(rue.jpg);
}
p {
text-align:center;
padding:60px;
background-color: rgba(255,255,255,0.3);
font-size: 50px;
font-weight: bold;
}
</style>
<body>
<div>
<p>가을</p>
</div>
</body>
덧글