배경 부착 방법 : 뷰포트가 아닌 div에 고정

큰 배경 표지가 있습니다.배경 부착 방법 : 뷰포트가 아닌 div에 고정

<div id="cover"> 
    ... 
</div>

그리고 CSS

#cover { 
    background:url('cover.jpg') no-repeat fixed center center/cover; 
    height: 350px; 
    width: 100%; 
}

예상 출력 : 배경 화상 350px X 100 %로 조정이 (제 경우 350x900에서) 기반 스크롤 효과를 가져야 <div id="cover"></div>에 있습니다.

는

실제 출력 : 배경 화상 (제 경우에 화면 1440x900) 뷰포트로 조정은, <html></html>에 기초하여 스크롤 효과를 갖는다.

내가 원하는 것은 background-attachement입니다. 뷰포트가 아닌 div에 상대적으로 고정되었습니다.

출처

2014-08-27 Kalzem

는'fixed' 뷰포트에 관해서는 항상, 즉이 지정하는 방법입니다. 실제로 달성하고자하는 것에 따라 (실제로 무엇을 의미하는지 확신 할 수 없음 _ "원하는 것은 배경 첨부입니다 : 뷰포트가 아닌 div에 상대적으로 고정"_) 가능한 해결 방법이있을 수 있습니다. – CBroe

고정 첨부 파일 (순수한 CSS3 포함)에서 '시차'효과를 찾고 있습니다. 새로운 트위터 표지 효과 같은 것. 오, 거기 시차 물건의 대부분으로 저어지가 아닌. – Kalzem

실제로 여기에 무엇을 묻는 지 이해하지는 못하지만 CSS 만 시차를 찾으려면 http://blog.keithclark.co.uk/pure-css-parallax-websites/?utm_source=dlvr을 확인해야합니다. it & utm_medium = twitter –

배경 이미지는 기본적으로 첨부 된 요소에 "고정"됩니다. 배경 CSS 속성을 fixed로 설정하면 DOM 요소의 경우와 동일하게 수행되므로 전체 문서 (뷰포트)와 관련하여 고정됩니다. 여기에 트릭을 할해야 스크롤 고정 속성을 변경

수 없습니다

background:url('cover.jpg') no-repeat scroll center center/cover;

출처

2014-08-27 13:46:11

배경 부착 방법 : 뷰포트가 아닌 div에 고정

답변

관련 문제