2016-10-03 2 views
-4

먼저 https://www.womentechmakers.com/을 살펴보고 약간 스크롤하십시오. 스크롤 할 때 이미지에 대한 오버레이 효과는 내가하고 싶은 것입니다. 이 작업을 위해 CSS/javascript를 제안 해주십시오. 감사합니다.스크롤하면서 이미지를 오버레이하는 내용

+0

안녕하세요, 환영에 유래하고 첫 번째 질문에 축하 할 수 있습니다. 그러나 질문의 ​​질이 매우 낮습니다. 이것을보고 연구를 포함한 더 자세한 내용을 추가하십시오 - http://stackoverflow.com/help/how-to-ask – Ankit

+0

또한 질문에 대한 포인터 - '시차 효과 연구'를 시도해보십시오. – Ankit

답변

0

background-attachment:fixed CSS 속성을 사용하여이를 수행 할 수 있습니다. 매우 빠른 데모는 아래 볼 수 있습니다 :

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    background: url(http://lorempixel.com/800/600); 
 
    background-attachment: fixed; /*This stops the image scrolling*/ 
 
} 
 
body { 
 
    min-height: 100vh; 
 
    margin-top: calc(100vh - 100px);/*Only 100px of screen visible*/ 
 
    background: lightgray;/*Set a background*/ 
 
}
<body>Some text that will scroll</body>

관련 문제