반응형
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
반응형
'IT' 카테고리의 다른 글
xcode에서 프로그래밍 방식으로 버튼에 액션을 추가하는 방법 (0) | 2020.08.13 |
---|---|
Android Studio- 디버그 키 저장소 (0) | 2020.08.13 |
Javascript를 통해 이미지의 평균 색상 (0) | 2020.08.13 |
다운로드 한 .box 파일을 Vagrant에 추가하는 방법은 무엇입니까? (0) | 2020.08.13 |
C로 간단한 HTTP 서버 구축 (0) | 2020.08.13 |