인프런 커뮤니티 질문&답변
작성한 질문수
title 클래스 opacity에 관련해서 질문있습니다
작성
·
173
0
전에 질문 드리긴 했었는데, 제가 너무 질문을 이해하지 못하게 설명을 했었었네요 ㅜㅜ 죄송합니다.
강의 13분 쯤에 main-container 안에 title 을 넣는 부분이 나오는데
이곳에서 main-container의 특성으로 opacity 를 적용했었습니다.
그리고 title도 만들었는데요.
main-container 안에 title이 있어서 그런건지
title에 있는 문자들이 opacity의 영향을 받습니다.
예를 들어 '광고보다 강의에 집중합니다' 라는 글자의 색을#fff 로 적용해도
main-container의 opacity를 변경해서 적용해 주는 순간 '광고보다 강의에 집중합니다' 라는 글자 또한 opacity의 영향을 받습니다.
opacity = 0.1;로 설정하면 글자는 거의 희미하게 보이구요.
잘 따라왔다고 생각했는데 이 부분만 다르게 적용되네요...
답변 1
0
안녕하세요.
main-container 안에 title 이 있기 때문에, 영향을 받는 것은 어쩔수 없어보입니다. 영향을 받겠다 라는 의미로, 그 안에 위치한 것이니까요. 만약, opacity 에 영향을 받지 않게 하려면, main-container 밖에 작성을 해야할 것으로 보여요. 그렇지 않다면, 아예 코드를 float 등을 사용해서, position 을 absolute 등으로 해서, main-container 와 완전히 분리되어, 그 위에 보여지게끔 해야할 것 같아요.
제가 작성했을 때는, main-container 에 어두운 배경색을 쓰되, opacity 를 0.9 로 해서 살짝만 그 뒤의 이미지가 보여지게 하고, 이 안에 0.9 정도면, 하얀색의 타이틀이 살짝 투명하더라도, 크게 영향을 받지 않게 해서 그렇게 작성하였습니다.
따라서, 말씀하신 것은 제가 드린 코드와 이미지 그대로라면, 의도한 바로 이해를 하고 있습니다.
다음과 같이 동일하게 0.9 로 적용을 하고 있습니다.
