이야기앱 세상

CSS 글자색은 선명하고 배경색은 투명하게 처리하기 본문

IT/CSS

CSS 글자색은 선명하고 배경색은 투명하게 처리하기

storya 2018. 12. 15. 23:35

글자색은 선명하고 배경색은 투명하게 처리하기


배경색은 투명하게 처리하려고 배경색에 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>




반응형
Comments