[CSS] Background 이미지 배경 어둡게 하기

이미지 파일로 배경을 꽉 채웠는데, 그 위에 텍스트를 화이트로 뿌리니 잘 보이지 않아서 한 방법이다! 배경색을 똑같이 설정하고 알파값만 주어 어둡게 하였는데, 이 때 사용한 그레디언트 방법 외에도 다양한 방법이 있어서 적어본다.

 

728x90

 

---

 

그레디언트 사용하기

1. 선형 그레이디언트 : 직선으로 진행하는 색상 무늬를 생성합니다.

background: linear-gradient(blue, pink);

2. 방향 전환 : 방향을 지정함으로써 그레이디언트를 회전할 수 있습니다.

background: linear-gradient(to right, blue, pink);

3. 대각선 그래디언트 : 한쪽 모서리에서 다른 쪽 모서리를 잇는 대각선 방향으로 진행하도록 할 수도 있습니다.

background: linear-gradient(to bottom right, blue, pink);

4. 각도 사용 : 더 정밀하게 방향을 지정하고 싶다면 특정 각도를 지정할 수 있습니다.

background: linear-gradient(70deg, blue, pink);

 

전체 코드

background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("/background.jpg");

 

참고 사이트

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients

CSS 그레이디언트 사용하기 - CSS: Cascading Style Sheets | MDN