div에 투명도를 주면 안에 포함된 자식 엘리먼트도 투명도가 적용됩니다.

Question

div을 플로팅해서 띄울 것이고 투명도를 적절하게 줄려고 합니다.

그런데 div안에 있는 것도 모두 투명도 적용되네요.

<div>
    <h2>Title</h2>
</div>

<style>
    div {
        opacity: 0.7;
    }
</style>

 

Answer 1

<div>
    <h2>Title</h2>
</div>

<style>
    div {
        background:rgba(255,255,255,0.7);
    }
    div h2 {
        background: rgba(0,0,0,1);
    }
</style>

opacity대신 background를 사용하세요.