IT

CSS 배경 이미지를 어둡게 하시겠습니까?

lottoking 2020. 8. 13. 06:51
반응형

CSS 배경 이미지를 어둡게 하시겠습니까? [복제]


이 질문에 이미 답변이 있습니다.

상당히 간단한 질문이어야합니다. 내 웹 사이트에서 다음을 수행합니다.

#landing-wrapper {
    display:table;
    width:100%;
    background:url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

제가하고 싶은 것은 배경 이미지를 더 어둡게 만드는 것입니다. 이 DIV 안에 UI 요소가 있기 때문에 어둡게하기 위해 다른 div를 배치 할 수 있다고 생각합니다. 제안?


다음 과 같이 배경 이미지와 함께 CSS3 Linear Gradient 속성을 사용할 수 있습니다 .

#landing-wrapper {
    display:table;
    width:100%;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('landingpagepic.jpg');
    background-position:center top;
    height:350px;
}

다음은 견본입니다.

#landing-wrapper {
  display: table;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://placehold.it/350x150');
  background-position: center top;
  height: 350px;
  color: white;
}
<div id="landing-wrapper">Lorem ipsum dolor ismet.</div>

참고 URL : https://stackoverflow.com/questions/26621513/darken-css-background-image

반응형