CSS 선형 그라데이션(linear-gradient), background 색상만 불투명하게 만들기 (after, rgba)

linear-gradient를 이용하여 선형 그라데이션 효과를 주었습니다. 

*linear-gradient는 시작점을 설정할 수 있습니다. (to left(right), 색상 %,색상 %) 또는 top과 bottom도 가능합니다. 설정하지 않을 시에는 기본값이 bottom이라고 합니다.  더 자세한 내용은 MDN의 자료를 살펴봅니다. 

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient()

이제 background 색상만 투명하게 만들 것입니다. 그런데.. opacity를 설정하면 글자도 함께 투명해지는 걸 볼 수 있습니다.

그래서 이건 구글에서 검색하다 알게된 어떤 공식 같은? ㅋㅋ 코드입니다. 출처는 아래 주소에 있습니다. 

::after를 이용하여 갖가지를 적용하고 제가 바꾼거라곤 background와 opacity 뿐입니다. ㅋㅋ 

https://www.designcise.com/web/tutorial/how-to-apply-css-opacity-to-background-color-only

그랬더니 너무 쨍한 색상에서 원하는 은은한 색으로 바뀌었습니다.  야호!

 

근데 더욱더 쉽게할 수 있는 방법이 있습니다. rgba를 이용하는 것이죠. linear-gradient에 to right를 적용하여 오른쪽에서 시작해 색을 주는데 rgba 0.3 , 0.5를 통해 불투명도를 적용했습니다.