[CSS] 배경 이미지를 어둡게 설정하는 방법

CSS를 사용하여 배경 이미지를 어둡게 설정하려는 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
// 출처: stackoverflow

숫자(0.5)를 변경하면서 적절한 설정을 찾도록 합니다. 

CSS Gradients에 대한 자세한 내용은 W3Schools 문서를 참고하세요.

그라데이션 배경(Gradient Background)

IE9에서는 작동하지 않는다고 하네요. Stackoverflow 문서를 보면 배경을 투명 이미지를 사용하는 방법을 이용해볼 수 있습니다. 가장 좋은 방법은 IE9를 사용하지 않는 것이라고 하네요.ㅎㅎ

(저는 크롬과 함께 IE11을 사용하고 있는데, IE에서 오류가 나는 사이트가 종종 있습니다. 빨리 노트북을 바꾸어야 하는데...)

참고로 배경 이미지를 흐리고 하고 싶은 경우 .content:before를 사용할 수 있습니다.

.content:before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;
  
  display: block;
  background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
  width: 1200px;
  height: 800px;
  
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
// 출처: https://codepen.io/akademy/pen/FlkzB

w3schools에서 제시하는 방법도 고려해볼 수 있습니다.

• https://www.w3schools.com/howto/howto_css_blurred_background.asp